容器组件

在网页开发的过程里，我们习惯会使用div作为一个容器，因为在 html 语意上它是不特别代表任何东西的容器，因此通常会用它来进行一些 css 样式的使用。在 flutter 里也有一个类似div的组件： Container，它本身提供了许多参数设定可以用来设定padding、margin、border、transform...等效果。

挑战目标

学习 Widgets

• Container
• Scafford

Container

Container 是一个很常使用的组件，我们看一下Container的原始码可以发现，它提供了许多样式设定上常使用的属性，在进行布局排版的过程很适合用来当作 Flutter 的 Box Model 包装其他组件。

class Container extends StatelessWidget {
  Container({
    Key? 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,
  })

从范例来看，我们在一张Image包装在一个大小为200x150的区块，设定外距20.0、内距20.0，以及定义背景色以及边框效果，再加上transform转移角度，就完成类似相框的效果。

    var body = Column(
      children: [
        Center(
          child: Container(
            constraints: BoxConstraints.tightFor(
              width: 200.0,
              height: 150.0,
            ),
            padding: EdgeInsets.all(1.0),
            margin: const EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              color: Color(0xFFFFE3D4),
              border: Border.all(
                color: Color(0xFFffd700),
                width: 2,
              ),
              borderRadius: BorderRadius.circular(4),
            ),
            transform: Matrix4.rotationZ(0.1),
            child: Image.asset(
              "assets/images/xFrame.jpg",
            ),
          ),
        ),
      ],
    );

Image 使用xframe图库的照片

Scaffold

Scaffold 应该是我们在学习 Flutter 过程中最常使用的容器组件，它提供了一个 App 画面布局的骨架，可以自订义 AppBar (标题)、Drawer(抽屉选单)、BottomNavigationBar(导栏功能)这些App上常见的layout配置。

    return Scaffold(
      key: scaffoldKey,
      appBar: appBar,
      drawer: drawer,
      body: body,
      bottomNavigationBar: bottomNavigationBar,
    );

因此下面我们就来试看看如何在 Scaffold 这个容器上新增选单功能吧。

• drawer

Drawer 提供左侧的抽屉选单容器位置，我们使用 ListView 与 ListTile 建立选单内容。

    var drawer = Drawer(
      child: ListView(
        children: [
          Container(
            color: Colors.red,
            height: 50,
            child: Center(
              child: Text(
                "抽屉选单",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.exit_to_app),
            title: Text('EXIT'),
            onTap: () => Navigator.pop(context),
          ),
        ],
      ),
    );

Drawer提供了一个左侧选单的容器空间，可以根据自己的需要定义这边空间内的组件布局。

• bottomNavigationBar

BottomNavigationBar提供底部导览列的布局功能，结合BottomNavigationBarItem的设定可以加上想要 icon 按钮。

    var bottomNavigationBar = BottomNavigationBar(
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: "首页"),
        BottomNavigationBarItem(
            icon: Icon(Icons.add_a_photo_outlined), label: '相机'),
        BottomNavigationBarItem(
            icon: Icon(Icons.bug_report_outlined), label: "bug"),
      ],
      currentIndex: _index,
      onTap: (index) {
        setState(() {
          _index = index;
        });

        if (index == 0) {
          Navigator.pop(context);
        }
      },
    );

小结

练习成果

容器化的布局组件很适合用来对 App 主要框架的布局作定义，让我们在特定的布局位置上定义想要的内容。