『Flutter』布局组件 Container、Row、Column、Stack

原创

杨不易呀

修改于 2024-01-17 21:25:58

3620

修改于 2024-01-17 21:25:58

文章被收录于专栏：Flutter18Flutter18

1.前言

经过上一篇文章，开发出来了第二个 Flutter 程序，接下来是给大家详细的介绍下 Flutter 的布局组件。

2.布局组件

Flutter 的布局组件非常的多，这里我就给大家介绍几个常用的布局组件，其他的布局组件大家可以去官方文档查看。

官方文档：https://flutter.dev/docs/development/ui/widgets/layout

2.1. Container

Flutter中的Container组件是一个非常通用且多功能的布局构件。它可以用来创建矩形的视觉元素，可以装饰以盒子装饰（例如背景色或边框），也可以配置边距、填充和尺寸约束。Container可以包含一个单独的子元素，但不是专门用来做子元素布局的，对于布局，Flutter提供了其他组件如Row、Column或Stack。

常用属性：

child: 容器内的单个子Widget。
padding: 插入子Widget周围的空白空间。
color: 容器的背景颜色。
decoration: 绘制在容器上的装饰，通常用于添加背景图像、边框、阴影等。
margin: 围绕容器外边缘的空白空间。
width 和 height: 容器的宽度和高度。
alignment: 控制子Widget如何在容器内对齐。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Container(
            width: 150.0,
            height: 150.0,
            padding: const EdgeInsets.all(16.0),
            margin: const EdgeInsets.symmetric(horizontal: 20.0),
            alignment: Alignment.center,
            color: Colors.blue,
            child: const Text(
              'Hello Container!',
              style: TextStyle(color: Colors.white),
            ),
          ))));
}

效果图：

2.2. Row

在Flutter中，Row和Column是用于布局的基本组件，它们分别用于在水平和垂直方向上排列子组件。

Row组件可以在水平方向上排列其子组件。它是一个灵活的布局工具，常用于创建水平布局。

常用属性：

children: Row中的子组件列表。
mainAxisAlignment: 如何沿主轴（在此情况下为水平方向）对齐子组件。
crossAxisAlignment: 如何沿交叉轴（在此情况下为垂直方向）对齐子组件。
mainAxisSize: 主轴的大小，默认为MainAxisSize.max。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: const Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Icon(Icons.share),
              Icon(Icons.thumb_up),
              Icon(Icons.thumb_down),
            ],
          )
      )
    )
 );
}

效果图：

这个例子创建了一个Row，其中包含三个图标，这些图标在行中均匀分布。

2.3. Column

Column组件用于在垂直方向上排列其子组件。

常用属性：

children: Column中的子组件列表。
mainAxisAlignment: 如何沿主轴（在此情况下为垂直方向）对齐子组件。
crossAxisAlignment: 如何沿交叉轴（在此情况下为水平方向）对齐子组件。
mainAxisSize: 主轴的大小，默认为MainAxisSize.max。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('First Item'),
              Text('Second Item'),
              Text('Third Item'),
            ],
          )
      )
    )
 );
}

效果图：

3. Stack

在Flutter中，Stack组件用于将多个子组件重叠在一起。Stack允许子组件相对于其边缘或相对于其他子组件的位置进行定位，非常适合用来创建重叠的布局。

常用属性：

children: Stack中的子组件列表。列表中的第一个组件是底部组件，随后的组件会在上面层叠。
alignment: 决定非定位子组件的对齐方式。默认值是AlignmentDirectional.topStart。
fit: 如何调整非定位子组件的大小。默认值是StackFit.loose，意味着子组件自身决定其大小。
overflow: 已弃用，替代属性为clipBehavior，决定如何显示超出Stack边界的子组件。

3.1.基本使用

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 300,
                height: 300,
                color: Colors.red,
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.green,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          )
      )
    )
 );
}

这个示例创建了一个Stack，其中包含三个大小不同、颜色不同的容器。最大的容器（红色）位于底部，其次是绿色和蓝色的容器。

children 是一个包含三个 Container 组件的列表，这些组件作为 Stack 组件的子元素。每个 Container 都有自己的尺寸和颜色。在 Stack 中，这些容器会按照列表中的顺序层叠显示，最先出现的在底部，最后出现的在顶部。

3.2.实现定位

在Flutter中，使用Stack和Positioned组件可以实现类似CSS中的绝对定位效果。Positioned组件可以指定子组件在Stack中的确切位置。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Stack(
            children: <Widget>[
              Positioned(
                left: 50,
                top: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              Positioned(
                right: 50,
                bottom: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
              Positioned(
                left: 150,
                top: 150,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
            ],
          )
      )
    )
 );
}

效果图：

End

?如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。
?您的每一条评论对我都至关重要，我会尽快给予回复。
?如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。
?您的每一个动作都是对我创作的最大鼓励和支持。
?谢谢您的阅读和陪伴！

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

登录后参与评论

0 条评论

热度