（原创）Flutter基础入门：各种常用容器类组件_flutter常用组件

前言

上篇博客主要讲了Flutter的Shape实现
Flutter基础入门：实现各种Shape效果
今天主要讲下Flutter中常用的一些容器组件
Flutter中组件数量很多，分类方式也各有不同
比如可以分为有态组价和无态组件
又可以分为容器组件、功能组件等
拿功能组件来说
有用来显示文字的TextView
显示图片的Image
显示列表的ListView等等
不过今天主要讲的还是一些容器组件
那么何为容器组件呢？
容器组件指的是可以容纳下级组件（1个或多个），
使用时以独立组件形式被运用的组件。
比如Row组件，刚刚提到的ListView组件等。
今天讲的容器组件
主要侧重点在于讲他们所支持的一些功能
通过介绍他们需要传入的参数的含义
来更清晰地了解这些容器的功能
而不仅仅是介绍用法
当然，这边也是选择一些常用并且功能强大的组件来介绍
下面正式开始

各种容器

Container

Container会是我们进行Flutter开发中用到的最强大也是最常用的单容器类控件
它可以实现装饰、定位、背景颜色、对齐方式、变换、裁剪等等一系列功能
我们先看下它的构造方法

  Container({
    super.key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以看到，这里可以传入很多的可选入参，我们逐一介绍

alignment

对齐方式，可以设置子组件的对齐方式
举例如下：

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      alignment: Alignment.center,
      color: Colors.grey,
      child: Text('文字控件'),
    );
  }
1
2
3
4
5
6
7
8
9
10

Alignment.center点进去会看到，其实是
center = Alignment(0.0, 0.0);
同理：
topLeft = Alignment(-1.0, -1.0);
bottomRight = Alignment(1.0, 1.0);
这样我们就知道了：
Alignment构造方法的第一个参数代表左右位置，第二个参数代表上下位置
0代表中心点，-1代表最左/最上，1代表最右/最下
比如：Alignment(0,1) 就是左右居中，靠下对齐
也就是：
bottomCenter = Alignment(0.0, 1.0);

padding & margin

padding是内边距，margin是外边距
比如：

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.only(top: 10),
      alignment: Alignment.topLeft,
      color: Colors.grey,
      child: Text('文字控件'),
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12

出来效果就是：

这里要注意，padding & margin需要传入的都是EdgeInsetsGeometry类型
EdgeInsetsGeometry抽象类有两个子类：EdgeInsets和EdgeInsetsDirectional
可以理解为这个类就是用来设置一些间距的

decoration & foregroundDecoration

foregroundDecoration是绘制在child前面的装饰。如果设置decoration， 此时foregroundDecoration 样式会叠加在decoration样式上边
装饰器可以看我这个系列下专门的博客
Flutter基础入门：装饰器Decoration

constraints

constraints是一个BoxConstraints类型
主要用来控制子控件的最小宽高，如下：

  Container(
    width: 200,
    height: 200,
    color: Colors.grey,
    alignment: Alignment.center,
    child: Container(
      child: Text('文字控件'),
      constraints: BoxConstraints(minWidth: 100,minHeight: 100),
      color: Colors.red,
    ),
  );
1
2
3
4
5
6
7
8
9
10
11

限制了最小宽高为100后，文字的背景大小就变成100了，而不再是之前紧紧包裹着文字

transform & transformAlignment

transform主要是通过一个4*4的变换矩阵来对子组件就行变换
可以实现的效果如：斜切，缩放，平移，旋转，透视等
transformAlignment则是变换的位置，
这个参数的类型和对齐方式alignment参数的类型是一样的
都是AlignmentGeometry类型
默认是Alignment.topLeft
比如我们可以以组件中心位置对Z轴进行旋转变换：

  Container(
  width: 200,
  height: 200,
  transformAlignment: Alignment.center,//变换位置：中心点旋转
  transform: Matrix4.rotationZ(-0.5),//z轴旋转
  color: Colors.grey,
  alignment: Alignment.center,
  child: Text('文字控件'),
);
1
2
3
4
5
6
7
8
9

效果如下：

clipBehavior

clipBehavior是是组件内容边缘的切割方式，当组件内容溢出时可以选择不同的裁剪方式

color & width &height & child

color就是用来设置容器填充色的，宽高传入double类型就好
child自然就是子组件了
这些简单的就不演示了

Padding

Padding主要是给子组件添加内边距的，可参考Container的padding

Align

Align用来设置子组件的对齐方式，可参考Container的alignment

ConstrainedBox

ConstrainedBox用来设置最小宽高，需要传入一个BoxConstraints类型，可参考Container的constraints

DecoratedBox

DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。
它的构造函数如下：

  const DecoratedBox({
    super.key,
    required this.decoration,
    this.position = DecorationPosition.background,
    super.child,
  })
1
2
3
4
5
6

其中position属性主要是设置装饰位置的
分为：
（DecorationPosition.foreground）前景，（DecorationPosition.background）背景

Transform

Transform主要是给子组件添加变换效果的的，可参考Container的transform

RotatedBox

用来旋转子组件的容器

  const RotatedBox({
    super.key,
    required this.quarterTurns,
    super.child,
  })
1
2
3
4
5

quarterTurns代表旋转的次数，每次旋转的度数只能是90度的整数倍
所以RotatedBox旋转的角度也只能是90度的整数倍

Clip裁剪相关组件

Clip相关组件主要用来进行对子组件的裁剪，如：
ClipOval：子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆
ClipRRect：将子组件剪裁为圆角矩形
ClipRect：默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）
ClipPath：按照自定义的路径剪裁
下面看具体例子：

class _ClipWidget extends StatelessWidget {
  final Image photo = Image.network(
    'https://tse1.mm.bing.net/th/id/OET.5272002b31e349ca8b7f061d2d17466f?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  );

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            photo,
            const SizedBox(
              height: 20,
            ),
            ClipOval(
              child: photo,
            ),
            const SizedBox(
              height: 20,
            ),
            ClipRRect(
              child: photo,
              borderRadius: const BorderRadius.all(Radius.circular(20)),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              color: Colors.red,
              child: Row(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    widthFactor: 0.5,
                    child: ClipRect(
                      child: photo,
                    ),
                  ),
                  const Text('我是文本')
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

效果如下：

FittedBox

当子组件的宽高比和父组件的宽高比不一样时，我们等比拉伸或者填充父组件，这时我们可以使用FittedBox

  Container(
    height: 200,
    width: 200,
    color: Colors.green,
    child: FittedBox(
      fit: BoxFit.contain,
      child: Container(
        height: 50,
        width: 80,
        color: Colors.red,
      ),
    ),
  );
1
2
3
4
5
6
7
8
9
10
11
12
13

如图：

其中fit参数表示了子控件的填充方式，说明如下：
fill：填充父组件，宽高比发生变化。
contain：等比拉伸，但子控件不能超出父控件。
cover：尽可能的小，等比拉伸充满父控件。
fitWidth：等比拉伸，宽充满父控件。
fitHeight：等比拉伸，高充满父控件。
none：默认子控件居中，不做拉伸处理，超出父控件的部分裁剪。
scaleDown：在子控件为Image且缩小的情况和contain一样，否则和none一样。

card

用来把子组件做成卡片类的样式
也可以用来实现一些Shape的效果
主要属性如下：

  const Card({
    super.key,
    this.color,//背景色
    this.shadowColor,//阴影颜色
    this.surfaceTintColor,
    this.elevation,//阴影高度
    this.shape,
    this.borderOnForeground = true,//是否在 child 前绘制 border，默认为 true
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  })
1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到大部分还是和Container类似的

Row & Column

这两个类似Android的LinearLayout
他们的children属性可以传入一个子组件数组
Row是对子组件进行横向布局
Column则是对子组件进行纵向布局

Wrap & Stack

Wrap 流式布局
Stack 类似Android中的帧布局FrameLayout

Scaffold

Scaffold翻译过来是脚手架的意思
其实也是为了方便我们快速搭建页面而提供给我们的一个模板组件

  const Scaffold({
    super.key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Scaffold的属性特别多，我们挑一些常用的来讲
appBar：页面顶部栏，是一个PreferredSizeWidget抽象类，可以选择AppBar，TabBar这些实现类来作为顶部栏
body：主体部分，放入一个子组件即可
bottomNavigationBar：底部组件，一般用于实现首页底部的按钮切换功能
drawer & endDrawer：左右侧滑组件
backgroundColor：背景色
floatingActionButton：浮动按钮
floatingActionButtonLocation：浮动按钮位置
下面写一个Scaffold包裹的页面
实现一些基本的演示功能：

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    title: "首页",
    home: CustomScaffold(),
  ));
}

class CustomScaffold extends StatefulWidget {
  const CustomScaffold({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CustomScaffoldState();
}

// AppBar 默认的实例,有状态
class _CustomScaffoldState extends State with SingleTickerProviderStateMixin {
  final List<String> tabs = const ['实时新闻', '今日头条', '经济', '股票', '体育竞技', '国际风云'];
  int _position = 0;
  final Map<String,IconData> iconsMap = {
    "首页": Icons.home,
    "动态": Icons.toys,
    "收藏": Icons.favorite,
    "图鉴": Icons.class_,
    "我的": Icons.account_circle,
  };
  final List<Color> _colors = [
    Colors.blue,
    Colors.red,
    Colors.yellow,
    Colors.green,
    Colors.purple,
  ];

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 300,
      child: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {},
        ),
        drawer: _buildLeftDrawer(),
        endDrawer: _buildLeftDrawer(),
        appBar: AppBar(
          title: const Text('首页'),
          backgroundColor: Colors.blue,
          centerTitle: true,
          bottom: _buildTabBar(),
        ),
        body: _buildTableBarView(),
        bottomNavigationBar: _buildBottomNavigationBar(),
      ),
    );
  }

  Drawer _buildLeftDrawer() => Drawer(
    elevation: 1,
    child: Image.network(
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F22%2F20190722235951_J3aVw.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684313785&t=63178f27b92b3cfc174d8354fe203c94',
      fit: BoxFit.cover,
    ),
  );

  PreferredSizeWidget _buildTabBar() => TabBar(
    isScrollable: true,
    controller: _tabController,
    indicatorColor: Colors.orangeAccent,
    tabs: tabs.map((e) => Tab(text: e)).toList(),
  );

  Widget _buildBottomNavigationBar() => BottomNavigationBar(
    onTap: (position) => setState(() => _position = position),
    currentIndex: _position,
    elevation: 1,
    backgroundColor: Colors.white,
    iconSize: 25,
    selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
    showUnselectedLabels: false,
    showSelectedLabels: true,
    items: iconsMap.keys
        .map((key) => BottomNavigationBarItem(
        label: key,
        icon: Icon(iconsMap[key]),
        backgroundColor: _colors[_position]))
        .toList(),
  );

  Widget _buildTableBarView() => TabBarView(
      controller: _tabController,
      children: tabs
          .map((e) => Center(
          child: Text(
            e,
            style: const TextStyle(color: Colors.blue, fontSize: 20),
          )))
          .toList());
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

效果如下：

资料分享

最后给大家推荐一个不错的项目：
Flutter_unit
大部分的组件都可以在这个项目里面学习
里面不仅仅有组件的介绍，还有实实在在的代码和效果演示

还有一个网站也可以学习到更多的组件：
Flutter | 老孟