学习Flutter的第五天（组件3）

2023-04-22 本文已影响0人囧rg

组件1：MaterialApp、Container、Text、Image、Icon
组件2：ListView、GridView
组件3：Padding、Row 、Column、Stack、Align、Positioned
组件4：AspectRatio、Row 、Button
组件5：Wrap、StatelessWidget 、StatefulWidget、Dialog、PageView、TextField

3.8 Padding

Padding用来为子元素添加填充，也就是指定子元素与容器边界的距离，作用基本上与Android中ViewGroup的padding属性差不多

名称	功能
padding	使用EdgeInsets 填充值
child	子组件

EdgeInsets提供了一些方法

fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
all(double value) : 所有方向均使用相同数值的填充。
only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

3.9 线性布局（Row 和 Column）

3.9.1 Row

名称	功能
mainAxisAlignment	主轴（横向）的排序方式，MainAxisAlignment
crossAxisAlignment	次轴（纵向）的排序方式，是组件相对于外层的容器的位置

image-20221010205653939-5406617.png

3.9.2 Column

与Row基本一致，就是排列顺序变成纵向

3.10 弹性布局（Flex Expanded）

参考内容： https://blog.csdn.net/Misdirection_XG/article/details/122885897

Row 和 Column 都继承Flex

名称	功能
direction	Axis.vertical 纵向，内部元素高度没有效果 Axis.horizontal 横向，内部元素宽度没有效果
mainAxisSize	MainAxisSize.max：主轴的大小是父容器的大小 MainAxisSize.min：主轴的大小是其子 Widget 大小之和
mainAxisAlignment	MainAxisAlignment.start：左对齐，默认值; MainAxisAlignment.end：右对齐 MainAxisAlignment.center：居中对齐 MainAxisAlignment.spaceBetween：两端对齐 MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半 MainAxisAlignment.spaceEvently：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等
crossAxisAlignment	CrossAxisAlignment.start：与交叉轴的起始位置对齐； CrossAxisAlignment.end：与交叉轴的结束位置对齐； CrossAxisAlignment.center：居中对齐； CrossAxisAlignment.stretch：填充整个交叉轴； CrossAxisAlignment.baseline：按照第一行文字基线对齐
verticalDirection	VerticalDirection.down：start 在顶部，end 在底部 VerticalDirection.up：start 在底部，end 在顶部
textBaseline	TextBaseline.alphabetic：与字母基线对齐； TextBaseline.ideographic：与表意字符基线对齐；

Expanded 可以使 Row、Column、Flex 里面的组件填充沿着主轴可利用的空间，如果多个 Widget 都使用了 Expanded 组件，可以使用 Expanded 的 flex 属性按照比例分配主轴空间，flex 属性相当于 Android LinearLayout 的 weight 属性

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 占一行的1份
        Expanded(flex: 1, child: IconContainer(Icons.home, Colors.cyan)),
        // 占一行的2份
        Expanded(flex: 2, child: IconContainer(Icons.percent, Colors.red))
      ],
      /*
      children: [
        // 左边占满
        Expanded(flex: 1, child: IconContainer(Icons.home, Colors.cyan)),
        // 右边固定宽度
                IconContainer(Icons.percent, Colors.red),
      ],
      */
    );
  }
}

3.11 层叠布局（Stack、Align、Positioned）

3.11.1 stack

Stack即层叠布局控件，能够将子控件层叠排列。

Stack控件的每一个子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根据alignment定位（默认为左上角）。然后根据定位的子控件的top、right、bottom和left属性将它们放置在Stack控件上。

名称	功能
alignment	指的是子Widget的对其方式，默认情况是以左上角为开始点

3.11.2 Positioned

这个使用控制Widget的位置，通过他可以随意摆放一个组件，有点像绝对布局

名称	功能
left	表示离Stack 左边的距离
top	表示离Stack 上边的距离
right	表示离Stack 右边的距离
bottom	表示离Stack 下边的距离
width	如果里面是Row组件，需要设置宽度
height	如果里面是Row组件，需要设置高度

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 400,
      color: Colors.red,
      child: Stack(
        children: [
          // 放到左下位置，
          Positioned(
            left: 0,
            bottom: 0,
            child: Container(
              height: 100,
              width: 100,
              color: Colors.yellow,
            ),
          ),
          // 放到右上位置
          const Positioned(top: 10, right: 10, child: Text("你好Flutter"))
        ],
      ),
    );
  }
}

3.11.3 Align

相对布局的组件：Align，Align组件允许我们通过修改它的属性来调整子组件的位置，并且可以根据子组件的宽高来确定Align自身的的宽高。

Align属性用于定义如何对齐子项。Align默认值是 Alignment.center

使用时，既可以使用定义好的方位，也可以自定义位置例如：

alignment: Alignment(0, 1) 
或者
alignment: Alignment.center

063529_29022-5416397.png