新建项目-2.png

  1. Row：水平方向的线性布局
  2. Column：垂直方向的线性布局

Row 和 Column 都继承自弹性布局 Flex，其实就是确定了主轴方向的 Flex，其余的用法和 Flex 一致。

Row 水平布局

Row 可以在水平方向排列其 子widget。

  1.  Row({
  2.     Key key,
  3.     MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, //在主轴的对齐方式
  4.     MainAxisSize mainAxisSize = MainAxisSize.max,  //表示主轴应该占用多大的空间
  5.     CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, //在垂直方向上，子widget的对齐方式，整体偏移
  6.     TextDirection textDirection,  //在水平方向上，子widget的排列方向
  7.     VerticalDirection verticalDirection = VerticalDirection.down,
  8.     TextBaseline textBaseline, //排列 子Widget 时使用哪个基线
  9.     List<Widget> children = const <Widget>[],
  10.   })

1. mainAxisAlignment 水平方向widget对齐方式

  1. // 在水平方向上，子widget的对齐方式，是整体位置的偏移，靠左，居中，靠右等。只有当MainAxisSIze.max时才有意义
  2. // mainAxisAlignment: MainAxisAlignment.start,  // 如果是TextDirection.ltr则是左对齐，rtl是右对齐
  1. enum MainAxisAlignment {
  2.   start,       // 如果是TextDirection.ltr则是左对齐，rtl是右对齐
  3.   end,         // 如果是TextDirection.ltr则是右对齐，rtl是左对齐
  4.   center,      // 居中对齐
  5.   spaceBetween,// 屏幕与子widget之间不留空隙，子widget之间距离相等
  6.   spaceAround, // 屏幕与子widget之间留一定空隙，子widget之间距离相等
  7.   spaceEvenly, // 屏幕与子widget之间，子widget之间距离相等
  8. }
  1.   RichText(
  2.   text: TextSpan(
  3.     children: <TextSpan>[
  4.       TextSpan(
  5.         text: "MainAxisAlignment.spaceEvenly\n",
  6.         style: TextStyle(fontSize: 20,color: Colors.blue)
  7.       ),
  8.       TextSpan(
  9.           text: "屏幕与子widget之间，子widget之间距离相等",
  10.           style: TextStyle(fontSize: 15,color: Colors.blueGrey)
  11.       ),
  12.     ]
  13.   ),
  14. ),
  15. Container(
  16.   color: Colors.amber,
  17.   height: 150,
  18.   child: Row(
  19.     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  20.     children: <Widget>[
  21.       Text(
  22.         "Row1",
  23.         style: TextStyle(
  24.             fontSize: 20,
  25.             color: Colors.blue
  26.         ),
  27.       ),
  28.       Image.network(
  29.         "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4032780575,3204528048&fm=26&gp=0.jpg",
  30.         width: 100,
  31.         height: 100,
  32.       ),
  33.       Text(
  34.         "Row2",
  35.         style: TextStyle(
  36.             fontSize: 20,
  37.             color: Colors.blue
  38.         ),
  39.       ),
  40.       Image.network(
  41.         "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1063547563,2289391090&fm=26&gp=0.jpg",
  42.         width: 100,
  43.         height: 100,
  44.       ),
  45.     ],
  46.   ),
  47. ),

image.png
image.png
image.png
image.png
image.png
image.png

2. mainAxisSize 表示主轴应该占用多大的空间

image.png
image.png

3. crossAxisAlignment 在垂直方向上,子widget的对齐方式

这里记住 start、end、center 就可以
image.png
image.png
image.png
image.png

4. textDirection

  1. textDirection: TextDirection.ltr,//从左到右
  2. textDirection: TextDirection.rtl,//从右到左

image.png
image.png

5. verticalDirection 垂直方向的排列顺序

  1. verticalDirection: VerticalDirection.up,  // 从下往上
  2. verticalDirection: VerticalDirection.down,// 从上往下

image.png

image.png

6. children 添加子视图组

Column

  1.  Column({
  2.     Key key,
  3.     MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  4.     MainAxisSize mainAxisSize = MainAxisSize.max,
  5.     CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  6.     TextDirection textDirection,
  7.     VerticalDirection verticalDirection = VerticalDirection.down,
  8.     TextBaseline textBaseline,
  9.     List<Widget> children = const <Widget>[],
  10.   })

可以看到和row是一样的.只是方向是垂直的.