soragui
soragui 编程-学习-思考

Flutter 学习笔记(五)basic widget 回顾

Flutter 学习笔记(五)basic widget 回顾

对Flutter跨平台的信息是越来越大了,进过了这么长时间的考察,决定以后移动端的开发就用它了(其实这段时间一直没怎么看)。首先就从最简单的 Row 和 Column 开始吧。

Row 和 Column 是 Flutter 种最常用的布局Widget,其中 Row 是按水平方向显示子Widget,而Column则是按垂直方向显示。

下面我们就来一步一步了解其中有哪些可用的属性值得我们关注。为了简单,我这里只是写了Row相关的例子,Column 和 Row 的一些属性具有对称性。

最简单的 Row 如下所示,传入了一个 *chaildren : []* 参数,子Widget数组,其成员可以是任意的Widget。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
child: Row(

          children: <Widget>[
            
            Container(
              width: 30.0,
              height: 30.0,
              color: Colors.black,
            ),
            Container(
              width: 30.0,
              height: 10.0,
              color: Colors.red,
            ),
            Container(
              width: 30.0,
              height: 20.0,
              color: Colors.green,
            ),

          ],

        ),

这个Row总共有三个Container子Widget,一个高度为30背景色为黑,一个高度为10背景色为红,一个高度为20背景色为绿,之所以用不同的高度,这样就可以看出Widget之间的对其方式,效果图如下所示:

Row 的构造函数如下所示:

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

其中 key 相当于一个指针对象,以后你可以用这个key来获取这个Row的一些属性。MainAxisAlignment 和 CrossAxisAlignment 分别表示主对角线对齐方式和副对角线对齐方式,在Row中就是 水平对齐方式和垂直对齐方式,那么在Column中就是垂直对齐方式和水平对齐方式。同样的MainAxisSize 在 Row 中表示水平方向上占用空间的大小,在 Column中表示在垂直方向上占用空间的大小。TextDirection 和 VerticalDirection 是选择对齐方向从哪里开始的(反正我是这么理解的)。好了下面就从具体的例子来看看这些参数是如何发挥作用的:

1
2
3
4
5
6
7
8
9
Row (

  mainAxisAlignment: MainAxisAlignment.center // 分别修改 mainAxisAlignment 为 center start end 

  children: <Widget>[
    ....
  ]

)

mainAxisAlignment.start

start

mainAxisAlignment.center

center

mainAxisAlignment.end

end

下面把 mainAxisAlignment 设置为 center 来看一下 crossAxisAlignment 的属性是如何工作的:

1
2
3
4
5
6
7
8
9
10
Row (

  mainAxisAlignment: MainAxisAlignment.center ,
  corssAxisAlignment: CrossAxisAlignment.start ,// 分别修改 crossAxisAlignment 为 center start end 

  children: <Widget>[
    ....
  ]

)

crossAxisAlignment.start

start

crossAxisAlignment.center

center

crossAxisAlignment.end

end

Column 和 Row 是对应的,他们之间互为对称关系。

还有 Expanded 和 Flex 没有想好怎么写,好乱 - 下次继续努力 🙂