flutter学习--Text组件

最新推荐文章于 2024-09-18 00:00:42 发布

原创最新推荐文章于 2024-09-18 00:00:42 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

android 同时被 2 个专栏收录

85 篇文章

订阅专栏

flutter

16 篇文章

订阅专栏

本文介绍了Flutter中的Text组件，讲解了textAlign、maxLines、overflow和softWrap属性的用法。textAlign用于控制文字内部对齐，maxLines限制文本的最大行数，overflow处理文本溢出，常见的处理方式有clip、ellipsis和fade。softWrap属性则决定了是否自动换行，style属性允许自定义文本样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Text组件属性

为了展示效果，首先编写如下代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Text组件学习',
      home: new Scaffold(
        appBar: AppBar(
          title: Text('Text组件学习'),
        ),
        body: Center(
          child: Text(
            "sassssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaa",
          ),
        ),
      ),
    );
  }
}

效果如图
在这里插入图片描述
1.textAligin属性，控制文字内部对齐方式

//textAlign: TextAlign.center  文字居中
//textAlign: TextAlign.end  文字居于尾部
//textAlign: TextAlign.start  文字居于首部
//textAlign: TextAlign.right  文字居右
//textAlign: TextAlign.left  文字居左
//textAlign: TextAlign.justify 文字两端贴边对齐

2.maxlines属性，控制文本最大行数，多余部分直接截取
3.overflow属性，
overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦

4.softWrap属性，控制是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
5.style属性，style属性的内容比较多，具体的你可以查一下API
https://docs.flutter.io/flutter/painting/TextStyle-class.html

//字体大小为25，颜色为紫色，有实线下划线
 style: TextStyle(
                fontSize: 25.0,
                color: Color.fromARGB(255, 255, 150, 255),
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid,
              ),