Flutter —— 文本,Container,布局

最新推荐文章于 2023-06-27 10:36:16 发布

LinShunIos

最新推荐文章于 2023-06-27 10:36:16 发布

阅读量900

点赞数 1

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/linshunios/article/details/120966611

版权

Flutter 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

Flutter —— 文字和弹性盒子布局

1. 文本

1.1 Text

首先创建一个简单的Text，然后输入文本后运行。

class TextDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Text(
      "大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏"
    );
  }
}

在这里插入图片描述
当加上textAlign: TextAlign.center之后，那么文字就会居中对齐。那么对应的.left 和 .right 则分别是左右对齐。

textAlign: TextAlign.center

在这里插入图片描述
文本里还可以添加style，这里有两种添加方式，一种是直接在Text里面的style添加，一种则是声明最终变量后使用。

class TextDemo extends StatelessWidget {

  final TextStyle _textStyle = TextStyle(
    fontSize:39,
  );
  @override
  Widget build(BuildContext context) {
    return Text(
      "大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏",
      textAlign: TextAlign.center,
      style:TextStyle(
        fontSize: 20,
      ),
    );
  }
}

这里也可以声明字符串然后进行字符串的拼接

  final String _lecturer = "LS";
  final String _title = "Flutter";
  //Text里面的文字变成
    "${'《' + _title + '》' + " ————  "+ _lecturer + "  "  }大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏",

运行后得到：
在这里插入图片描述
这里可以通过maxLines来进行最大行数的限制,然后运用overflow进行超出文字的处理。

 maxLines:1
 overflow: TextOverflow.ellipsis,

1.2 RichText

我们在进行开发的时候经常会遇到一段文本中会有不同的字体，不同的颜色展示，RichText就是用来解决这些问题的。
简单的样例：

RichText(
      text: const TextSpan(
        children:  <TextSpan>[
          TextSpan(
            text: "《Flutter》",
            style: TextStyle(
              fontSize: 30,
              color: Colors.black,
            ),
          ),
          TextSpan(
            text: "--",
            style: TextStyle(
              fontSize: 40,
              color: Colors.red,
            ),
          ),
        ],

      ),
    );

2. Container

Container作为Flutter中的用来布局的Widget，通常当作容器使用，相当于IOS的UIView。

class TextDemo extends StatelessWidget {
  const TextDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color:Colors.yellow
    );
  }
}

如果子部件中有Container，那么就不能用const来修饰，否则会报错。
在这里插入图片描述
Container里面如果不给子部件的话，那么他就没有大小，就不会显示出来。当然有一些特殊情况例外，比如在Scaffold里面的body大小就会为body的大小。不指定大小的话，Container的大小会跟着子部件的大小以及边距而变化。

  padding: EdgeInsets.all(30),
 margin: EdgeInsets.all(10),

在这里插入图片描述

如果Container的大小不够满足边距的话会优先满足左边和上边的边距。

 Container(
            color:Colors.red,
            child: Icon(Icons.add),
            padding: EdgeInsets.all(180),
            margin: EdgeInsets.all(10),
            height: 200,
            width: 200,
          ),

在这里插入图片描述
如果边距超过Container大小的话就会跑到外面。

Container 中还有一个属性alignment。Alignment继承自AlignmentGeometry，表示矩形内的一个点，他有两个属性x、y，分别表示在水平和垂直方向的偏移。Alignment Widget会以矩形的中心点作为坐标原点，即Alignment(0.0, 0.0) 。x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽（或高），如Alignment(-1.0, -1.0) 代表矩形的左侧顶点，Alignment(-1.0, 1.0) 代表矩形的左侧底部终点,而Alignment(1.0, 1.0)代表右侧底部终点，而Alignment(1.0, -1.0) 则正是右侧顶点，即Alignment.topRight。为了使用方便，矩形的原点、四个顶点，以及四条边的终点在Alignment类中都已经定义为了静态常量。

 const Alignment(this.x, this.y)
    : assert(x != null),
      assert(y != null);

这个时候Text就会在中心点。

Container(
      color: Colors.yellow,
      child: Text("hello my friends"),
       alignment: Alignment(0.0,0.0),
      );

3.布局

3.1 Row & Column & Stack

Row可以沿水平方向排列其子widget,也就是横向布局。Column可以在垂直方向排列其子组件，可以理解为纵向布局。而Stack允许子组件堆叠，是层叠布局，可以理解为Z轴。

3.2 Alignment

class LayoutDemo extends StatelessWidget {
 const LayoutDemo({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.yellow,

     alignment: const Alignment(0,0),
     child: Row(
       children: [
         Icon(Icons.add,size: 30,),
         Icon(Icons.ac_unit,size: 60,),
         Icon(Icons.baby_changing_station,size: 90,),
       ],
     ),
     );
 }
}

运行后得到下面的图，这里发现x对row没有影响了，因为container有多宽，row就有多宽，所以X对row就没有影响了。从这里也可以推出Y对Column没有影响，而Stack则是都有影响。
在这里插入图片描述

 return Container(
      color: Colors.yellow,
      alignment: const Alignment(0, 0),
      child: Column(
        children: [
          Container(
            color: Colors.red,
            child: Icon(
              Icons.add,
              size: 90,
            ),
          ),
          Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              size: 60,
            ),
          ),
          Container(
            color: Colors.white,
            child: Icon(
              Icons.baby_changing_station,
              size: 30,
            ),
          ),
        ],
      ),
    );

运行后发现确实Y对Column没有影响。
在这里插入图片描述

下面是Stack的情况，看到确实都有影响。
在这里插入图片描述

3.3 主轴

在row中，主轴是X轴，默认朝右，在Column中，主轴是Y轴，默认朝下，主轴对齐属性主要有：start，end，center，spaceBetween，spaceAround，spaceEvenly。使用text Direction的话可以改变主轴的方向。

Start就是正常的左对齐，这里就不测试了。

给Row的mainAxisAlignment赋值为MainAxisAlignment.end。

mainAxisAlignment: MainAxisAlignment.end,

运行后得到下图，发现向右对齐了。
在这里插入图片描述
给Row的mainAxisAlignment赋值为MainAxisAlignment.center。

给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceBetween。

给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceBetween,这里是将剩余的空间平均分布到控件之间。

给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceAround，这里是将剩余的空间平均分布到小控件周围。
在这里插入图片描述

给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceEvenly。这里是将剩余的空间和小部件平均分。

在这里插入图片描述

3.4 交叉轴

交叉轴就是垂直与主轴方向的轴。

将Row里面的crossAxisAlignment设为CrossAxisAlignment.start,可以看到三个icon的头部是对齐的。
在这里插入图片描述
将Row里面的crossAxisAlignment设为CrossAxisAlignment.end,可以看到三个icon的底部是对齐的。

在这里插入图片描述
将Row里面的crossAxisAlignment设为CrossAxisAlignment.center,可以看到三个icon的中心是对齐的。

在这里插入图片描述
CrossAxisAlignment.baseline,需要搭配textBaseline使用，否则会报错。将icons改成文字来看效果。发现这个是文字的底部对齐了。

3.5 Expanded

Expanded 只能作为 Flex 的孩子（否则会报错），它可以按比例“扩伸”Flex子组件所占用的空间。因为 Row和Column 继都承自Flex，所以 Expanded 也可以作为它们的孩子。所有的Expanded按照其 flex 的比例来分割主轴的全部空闲空间。
将Row的children里面的Container用Expanded包起来。

 return Container(
      color: Colors.yellow,
      alignment: const Alignment(0, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(
            child: Container(
              color: Colors.red,
              child: Text(
                '你好',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Text(
                '女吼',
                style: TextStyle(fontSize: 40),
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.white,
              child: Text(
                '类猴',
                style: TextStyle(fontSize: 60),
              ),
            ),
          ),
        ],
      ),
    );

运行后看到三个文本平分了row的主轴。如果空间不够用则会自动换行。在Expanded里面，主轴方向设置大小将没有意义，也就是说，在Row里面设置width不会生效，在column里面设置height不会生效。
在这里插入图片描述

4. 总结

布局部件
- Center。让子部件在本部件的居中位置显示
- Container中相对位置属性
Alignment。参数：x 和 y
- 原点在中间位置
Row&Column
- 横向布局Row。
  - 子部件按照主轴方向（横向）排列。主轴方向从左到右
- 纵向布局Column。
  - 子部件按照主轴方向（纵向）排列。主轴方向从上到下
- 每一个UI部件都可以看成一个矩形的“盒子”
- 每一个盒子都有外边距Margin和内边距padding.
- 主轴：MainAxisAlignment
  - spaceBetween: 剩下的空间平均分布到小部件之间！！
  - spaceAround: 剩下的空间平均分布到小部件周围！！
  - spaceEvenly：剩下的空间和小部件一起平均分！！
  - start 向主轴开始的方向对齐。
  - end 向主轴结束的方向对齐。
  - center 主轴方向居中对齐。
- 交叉轴：CrossAxisAlignment 垂直于主轴方向
  - baseline：文字底部对齐
  - center：交叉轴方向居中对齐。
  - end：向交叉轴结束的方向对齐。；
  - start：向交叉轴开始的方向对齐；
  - stretch：填满交叉轴方向；
Expanded 填充布局
- 在主轴方向不会剩下间隙。将被Expanded包装的部件进行拉伸和压缩
- 主轴横向，宽度设置没有意义
- 主轴纵向，高度设置没有意义
- 当Text被Expanded包装后，文字可以自动换行。这也被称作灵活布局。

LinShunIos

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Flutter —— 文本,Container,布局

Flutter —— 文字和弹性盒子布局1. 文本1.1 Text1.2 RichText2. Container3.布局3.1 Row & Column & Stack3.2 Alignment3.3 主轴3.4 交叉轴3.5 Expanded1. 文本1.1 Text首先创建一个简单的Text，然后输入文本后运行。class TextDemo extends StatelessWidget { @override Widget build(BuildContext co
复制链接

扫一扫