Flutter Row Column MainAxisAlignment Expanded

最新推荐文章于 2024-05-31 23:09:13 发布

kaina404

最新推荐文章于 2024-05-31 23:09:13 发布

阅读量707

点赞数

分类专栏： Flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/helloxjh/article/details/88368218

版权

Flutter 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

博客地址：flutterall.com

Row 和 Column类似于Android里面的线性布局，只不过分别是水平方向和垂直方向。

Row

水平布局Widget

构造方法

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>[],
  })

Demo


class FlutterRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: <Widget>[Text("One"), Text("Two"), Text("Three")],
      ),
    );
  }
}

Row

Column

垂直布局Widget

构造方法

跟Row基本一致


Column({
    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>[],
  })

Column

Column Row属性

MainAxisAlignment（布局的主轴对齐约束）

enum MainAxisAlignment {
  start,
  end,
  center,
  spaceBetween,
  spaceAround,
  spaceEvenly,
}

MainAxisAlignment start center end图示

看代码说话：

Code


Row(
        children: <Widget>[Text("One"), Text("Two"), Text("Three")],
      )

Row默认

Row MainAxisAlignment.start center end

Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[Text("One"), Text("Two"), Text("Three")],
      )

MainAxisAlignment.start center end

Column MainAxisAlignment.start center end


Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text("One"), Text("Two"), Text("Three")],
      )

start
center

end

MainAxisAlignment.spaceBetween spaceAround spaceEvenly

spaceBetween spaceAround spaceEvenly

Expanded

如果我们在布局的时候，想对Widget进行等分，或者按比例占空间。就可以使用Expanded,使用这个Widget时候，会对非Expanded的子child进行布局，剩下的控件区域，留给Expanded的子child。
Expanded构造

Expanded({
   Key key,
   int flex = 1,//默认一等分。类似LinearLayout中的weight=1
   @required Widget child,
 })

Demo

class FlutterRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
          children: <Widget>[
            Expanded(child: Text("One")),
            Expanded(child: Text("Two")),
            Expanded(
              child: Text("Three"),
            )
          ]
      ),
    );
  }
}

Expanded处理前后（一等分）
Expanded flex属性
类似于LinearLayout的weight

class FlutterRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: <Widget>[
          Expanded(child: Container(color: Colors.brown,),flex: 1,),
          Expanded(child: Container(color: Colors.blue,), flex: 1,),
          Container(color: Colors.amberAccent,constraints: BoxConstraints(minHeight: 100, maxHeight: 100),)//未参与Expanded，
// 除了此Widget的空余区域均留给Expanded修饰的Colors.brown & Colors.blue,进行1：1等分
        ],
      ),
    );
  }
}