Flutter开发 多孩子布局组件

发布于：2025-08-09 ⋅ 阅读:(32) ⋅ 点赞:(0)

标题

1.Row 水平排列

(1)MainAxisAlignment
主轴

属性 说明
start 从主轴的起点开始放置子元素
end 从主轴的终点开始放置子元素
center 将子元素放置在主轴的中心
spaceAround 将主轴方向的空白区域均分，让子元素之间的空白区域相等，单首尾子元素的空白区域为其他空白区的一半

在这里插入图片描述

void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(theme: ThemeData(), home: MyFul());
  }
}

class MyState extends State {

  Row row = Row(
    children: [Text("目录1"), Text("目录2"), Text("目录3"), Text("目录4"), Text("目录5")],
    mainAxisAlignment: MainAxisAlignment.spaceAround,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Container"), centerTitle: true),
      body: row,
    );
  }
}

class MyFul extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyState();
  }
}

（2）crossAxisAlignment
次轴

属性 说明
start 在交叉轴上起点处展示
end 在交叉轴上终点处展示
center 子元素在交叉轴上居中

2.Column 垂直排列

  Column column = Column(
    children: [
      Text("11111"),
      Text("11111"),
      Text("11111"),
      Text("11111"),
      Text("11111"),
    ],
    mainAxisAlignment: MainAxisAlignment.spaceAround,//垂直方向为主轴
  );

在这里插入图片描述

3.Flex

row与Column的组合
在这里插入图片描述

class MyState extends State {
  Flex flex = Flex(
    direction: Axis.horizontal,
    children: [Text("data1"), Text("data2"), Text("data3"), Text("data4")],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Column"), centerTitle: true),
      body: flex,
    );
  }
}

4.Expanded

将子元素的宽度或高度扩展至充满主轴方向的空白空间。Expanded不是多孩子布局，经常与多孩子布局组件组合使用。
请添加图片描述

class MyState extends State {
  Row row = Row(
    children: [
      Expanded(flex: 1, child: TextField()), //flex相当于android的weight
      Expanded(flex: 0, child: Text("发送")),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flex"), centerTitle: true),
      body: row,
    );
  }
}

5.Warp组件

可以将其承载的子元素自动换行的组件。

在这里插入图片描述

class MyState extends State {
  Wrap wrap = Wrap(
    children: [
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
      OutlinedButton(onPressed: () {}, child: Text("data")),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flex"), centerTitle: true),
      body: wrap,
    );
  }
}

6.Stack

可以将其承载的子元素堆叠，

请添加图片描述

class MyState extends State {
  Stack stack = Stack(
    alignment: Alignment.bottomCenter,//对齐方式
    children: [
      CircleAvatar(
        radius: 50,
        backgroundImage: NetworkImage(
          "https://pic.rmb.bdstatic.com/bjh/news/49fa0be5e4ab397fe5a04412d5cfe3f6.png",
        ),
      ),
      Text(
        "直播中",
        style: TextStyle(backgroundColor: Colors.red, color: Colors.white),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flex"), centerTitle: true),
      body: stack,
    );
  }
}

请添加图片描述

class MyState extends State {
  Stack stack = Stack(
    alignment: Alignment(0.8, 0.8),
    children: [
      CircleAvatar(
        radius: 50,
        backgroundImage: NetworkImage(
          "https://pic.rmb.bdstatic.com/bjh/news/49fa0be5e4ab397fe5a04412d5cfe3f6.png",
        ),
      ),
      Text(
        "V",
        style: TextStyle(backgroundColor: Colors.red, color: Colors.white),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flex"), centerTitle: true),
      body: stack,
    );
  }
}

Alignment(0.8, 0.8)跟坐标有关系,(0,0)正好在图片中间。
请添加图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布