Flutter开发之——多组件布局容器-权重组件(Flexible、Expanded、Spacer)

作者：System 时间：2024年08月16日分类：所有,flutter 字数：1223

这篇文章距离上次修改已过242天，其中的内容可能已经有所变动。

在Flutter中，Flexible、Expanded和Spacer是用于构建灵活布局的组件。以下是它们的简单使用示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Flexible(
              flex: 2,
              child: Container(color: Colors.red,),
            ),
            Expanded(
              child: Container(color: Colors.green,),
            ),
            Flexible(
              flex: 1,
              child: Container(color: Colors.blue,),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中：

Flexible 用于在Column中创建一个可以伸缩的空间。flex属性定义了该空间相对于其他可伸缩空间的伸缩比例。
Expanded 用于在Column或Row中填充剩余的空间。如果有多个Expanded组件，则它们会平分可用空间。

如果你需要在两个组件之间添加空白空间，可以使用Spacer，它会在Column或Row中填充空白空间。

Column(
  children: <Widget>[
    Flexible(
      child: Container(color: Colors.red),
    ),
    Spacer(), // 添加空白空间
    Flexible(
      child: Container(color: Colors.blue),
    ),
  ],
),

Spacer本身是一个Flexible组件，默认占用0个视口单位，在Column或Row中表现为0宽度，在Flex或Column中表现为0高度。

Flutter开发之——多组件布局容器-权重组件(Flexible、Expanded、Spacer)

评论已关闭

推荐阅读