Flutter 基础控件布局

最新推荐文章于 2024-06-18 15:30:00 发布

路和远方

最新推荐文章于 2024-06-18 15:30:00 发布

阅读量412

点赞数 1

分类专栏： Flutter 文章标签： Flutter 基础控件

本文链接：https://blog.youkuaiyun.com/shuzhuchengfu/article/details/101522249

版权

Flutter 专栏收录该内容

31 篇文章

订阅专栏

本文深入探讨Flutter中的水平布局、垂直布局、居中布局和层叠布局，解析Row、Column、Center和Stack组件的使用技巧，以及MainAxisAlignment、MainAxisSize、CrossAxisAlignment和VerticalDirection属性的详细配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平布局

/// 水平布局排列 灵活布局和不灵活布局 混用
class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        // 不灵活布局
        RaisedButton(
          onPressed: () {
            print("点击了红色按钮");
          },
          color: Colors.red,
          child: Text("红色按钮"),
        ), FlexibleRaiseButton(
          onPressed: () {
            print("点击了黄色按钮");
          },
          color: Colors.yellow,
          child: Text("黄色按钮"),
        ), RaisedButton(
          onPressed: () {
            print("点击了蓝色按钮");
          },
          color: Colors.blue,
          child: Text("蓝色按钮"),
        )
      ],
    );
  }
}

/// 灵活布局
class FlexibleRaiseButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Widget child;
  final Color color;

  FlexibleRaiseButton(
      {@required this.onPressed, @required this.child, @required this.color});

  @override
  Widget build(BuildContext context) {
    return Expanded(child: RaisedButton(
      onPressed: onPressed, child: child, color: this.color,));
  }
}

效果

在这里插入图片描述

常用属性

MainAxisAlignment

主轴方向上的对齐方式，会对child的位置起作用，默认是start。
其中MainAxisAlignment枚举值：

center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
start：将children放置在主轴的起点；

MainAxisSize

在主轴方向占有空间的值，默认是max。
MainAxisSize的取值有两种：

max：根据传入的布局约束条件，最大化主轴方向的可用空间；
min：与max相反，是最小化主轴方向的可用空间；

CrossAxisAlignment

children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。
CrossAxisAlignment枚举值有如下几种：

baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；

VerticalDirection

定义了children摆放顺序，默认是down。
VerticalDirection枚举值有两种：

down：从top到bottom进行布局；
up：从bottom到top进行布局。

垂直布局

/// 垂直布局排列
class ColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      // 交叉轴偏右
      crossAxisAlignment: CrossAxisAlignment.end,
      // 主轴居中
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("我是第一行"),
        Text("我是第二行,但是我比别人长"),
        Text("我是第三行")
      ],
    );
  }
}

效果

在这里插入图片描述

居中布局

/// 居中布局
class CenterDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ColumnDemo(),
    );
  }
}

效果

在这里插入图片描述

层叠布局

/// 层叠布局
class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // 创建一个圆形头像
        CircleAvatar(
          backgroundImage: NetworkImage(
              "https://avatar.youkuaiyun.com/2/B/C/3_shuzhuchengfu.jpg"),
          radius: 100.0,
        ),
        // 创建一段描述
        Positioned(
            top: 10,
            left: 10,
            child: Text('我是第一段描述', style: TextStyle(color: Colors.red),)
        ),
        Positioned(
            right: 50,
            bottom: 20,
            child: Text('我是第二段描述', style: TextStyle(color: Colors.green),)
        ),
      ],
    );
  }
}