Flutter 水平布局

Flutter 水平布局(Row)，水平布局是一种常用的布局方式，我们主要使用Row组件来完成子组件在水平方向的排列。Row组件常见属性如下所示：

对于Row来说，水平方向是主轴，垂直方向是次轴，可以完全参照Web中的Flex布局，如图所示:

示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    title: '水平布局示例',
    home: LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('水平布局示例'),
      ),
      // 水平布局
      body: Row(
        children: <Widget>[
          Expanded(
              child: Text('左侧文本', textAlign: TextAlign.center),
          ),
          Expanded(
            child: Text('中间文本', textAlign:
TextAlign.center),
          ),
          // 右侧图标
          Expanded(
              child: FittedBox(
                fit: BoxFit.contain,
                child: const FlutterLogo(),
              ),
          ),
        ],
      ),
    );
  }
}

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 对齐布局
• Flutter 填充布局
• Flutter 居中布局
• Flutter 容器布局