当前位置: 首页>数据库>正文

学习Flutter的第五天(组件3)

组件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 次轴(纵向)的排序方式,是组件相对于外层的容器的位置
学习Flutter的第五天(组件3),第1张

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
学习Flutter的第五天(组件3),第2张
063529_29022-5416397.png

https://www.xamrdz.com/database/6gp1997226.html

相关文章: