Flutter圈子

android中常用布局参数在flutter中的实现

2020-04-20  本文已影响0人  waiwaaa

1、Width = Wrap_content Height=Wrap_content:

Wrap(
  children: <Widget>[your_child])

流式布局,会自动换行

2、Width = Match_parent Height=Match_parent:

Container(
        height: double.infinity,
    width: double.infinity,child:your_child)

3、Width = match_parent ,Height = wrap_conten:

Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

4、Width = Wrap_content ,Height = Match_parent:

Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

5、占满剩余空间Expanded

Expanded(child:your_child)

Expanded为Flexible,默认 flex: 1,flex相当于android里的weight
6、主轴平均分配空间MainAxisAlignment.spaceAround

Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          your_child1,
          your_child2,
          your_child3,
        ],
      )

7、Row/Column 常用的属性:

当设置 mainAxisAlignment: MainAxisAlignment.spaceBetween 的时候。


image.png

更具体的布局内容可以参与Flutter布局详解
水平和垂直布局详解

上一篇 下一篇

猜你喜欢

热点阅读