Flutter 对齐布局

Flutter 对齐布局（Align），Align即对齐组件，能将子组件按指定方式对齐，并根据子组件的大小调整自己的大小。Align组件的属性及说明如下所示：

这里我们写一个例子，放入多张图片，这些图片分别放置在不同的位置。具体步骤如下:

步骤1: 在helloworld工程下新建一个images文件夹，并放入9张图片，如图所示:

步骤2: 打开工程根目录下的文件，如图所示:

步骤3: 修改工程配置文件，添加图片的路径配置。如图所示:

接着添加一个Stack组件，暂时不用考虑Stack组件在此处的作用，我们需要在这个组件的左上角、右上角、左下角、右下角和中间分别放置几张图片。完整的示例代码如下：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Align对齐布局示例'),
      ),
      body: Stack(
          children: <Widget>[
              // 左上角
              Align(
                // 对齐属性，确定位置
                    alignment: FractionalOffset(0.0, 0.0),
                    // 添加图片
                    child: Image.asset('images/1.jpeg',width: 128.0,height: 128.0,),
                  ),
                  // 右上角
                  Align(
                    alignment: FractionalOffset(1.0,0.0),
                    child: Image.asset('images/1.jpeg',width: 128.0,height: 128.0,),
                  ),
                  // 水平垂直方向居中
                  Align(
                    alignment: FractionalOffset.center,
                    child: Image.asset('images/3.jpeg',width: 128.0,height: 128.0,),
                  ),
                  // 左下角
                  Align(
                    alignment: FractionalOffset.bottomLeft,
                    child: Image.asset('images/2.jpeg',width: 128.0,height: 128.0,),
                  ),
                  // 右下角
                  Align(
                    alignment: FractionalOffset.bottomRight,
                    child: Image.asset('images/2.jpeg',width: 128.0,height: 128.0,),
                  ),
                ]
            ),
          );
      }
    }
    void main() {
      runApp(
          MaterialApp(
            title: 'Align对齐布局示例',
            home: LayoutDemo(),
          ),
      );
    }

视图的展现大致如图所示:

酷客教程相关文章：

• Flutter 填充布局
• Flutter 居中布局
• Flutter 容器布局
• Flutter 导航组件集