flutter常用基础组件

flutter常用基础组件

1.Row

Row 是一个可以沿水平方向展示它的子组件的组件。

• 常用属性

crossAxisAlignment：子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有：
    CrossAxisAlignment.start：子组件在 Row 中顶部对齐。
    CrossAxisAlignment.end：子组件在 Row 中底部对齐。
    CrossAxisAlignment.center：子组件在 Row 中居中对齐。
    CrossAxisAlignment.stretch：拉伸填充满父布局。
    CrossAxisAlignment.baseline：在 Row 组件中会报错。

mainAxisAlignment：子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有：
    MainAxisAlignment.start：靠左排列。
    MainAxisAlignment.end：靠右排列。
    MainAxisAlignment.center：居中排列。
    MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等。
    MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列。
    MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等。

mainAxisSize：Main 轴大小，可选值有：
    MainAxisSize.max：相当于 Android 的 match_parent。
    MainAxisSize.min：相当于 Android 的 wrap_content。

textBaseline：不太理解。

textDirection：子组件排列顺序，可选值有：
    TextDirection.ltr：从左往右开始排列。
    TextDirection.rtl：从右往左开始排列。
verticalDirection：确定如何在垂直方向摆放子组件，以及如何解释 start 和 end，指定 height 可以看到效果，可选值有：
    VerticalDirection.up：Row 从下至上开始摆放子组件，此时我们看到的底部其实是顶部。
    VerticalDirection.down：Row 从上至下开始摆放子组件，此时我们看到的顶部就是顶部。

children：子组件，值是一个 Widget 数组。

2.Column

Column 是一个可以沿垂直方向展示它的子组件的组件。

• 常用属性

//子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有：
//CrossAxisAlignment.start：子组件在 Row 中顶部对齐
//CrossAxisAlignment.end：子组件在 Row 中底部对齐
//CrossAxisAlignment.center：子组件在 Row 中居中对齐
//CrossAxisAlignment.stretch：拉伸填充满父布局
//CrossAxisAlignment.baseline：在 Row 组件中会报错
crossAxisAlignment: CrossAxisAlignment.start,
//子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有：
//MainAxisAlignment.start：靠左排列
//MainAxisAlignment.end：靠右排列
//MainAxisAlignment.center：居中排列
//MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等
//MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列
//MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//Main 轴大小，可选值有：
//MainAxisSize.max：相当于 Android 的 match_parent
//MainAxisSize.min：相当于 Android 的 wrap_content
mainAxisSize: MainAxisSize.max,
//不太理解
//            textBaseline: TextBaseline.alphabetic,
//子组件排列顺序，可选值有：
//TextDirection.ltr：从左往右开始排列
//TextDirection.rtl：从右往左开始排列
textDirection: TextDirection.ltr,
//确定如何在垂直方向摆放子组件，以及如何解释 start 和 end，指定 height 可以看到效果，可选值有：
//VerticalDirection.up：Row 从下至上开始摆放子组件，此时我们看到的底部其实是顶部
//VerticalDirection.down：Row 从上至下开始摆放子组件，此时我们看到的顶部就是顶部
verticalDirection: VerticalDirection.down,

3.Expanded

会填充空间

• 常用属性
  flex 分配空间的弹性系数，Row，Column或Flex的每个Expanded的flex构成空间分配的比例，默认int flex = 1

4.SizedBox

意思就是一个指定大小的盒子，SizedBox会强制设置它的孩子的宽度或者高度为指定值。

5.ElevatedButton

常用按钮

6.Stack、Positioned

层叠布局，可以实现绝对定位布局

7.Container

是一个组合类容器，

8.Clip

裁剪，设置圆角等