【flutter】Expanded组件

最新推荐文章于 2025-09-29 20:10:17 发布

原创

最新推荐文章于 2025-09-29 20:10:17 发布 · 1.9w 阅读

18 ·

CC 4.0 BY-SA版权

本文深入解析了Flutter框架中Expanded组件的功能与用法，通过多个示例展示了如何使用Expanded组件来动态调整child组件沿主轴的尺寸，实现如填充剩余空间、设置尺寸比例等布局效果。

Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使用。

构造函数

const Expanded(
{
   
   Key key,
int flex: 1,
@required Widget child}
)

它除了child之外，有一个flex属性比较常用。flex表示弹性系数，默认是1。

下面结合Row来实验Expanded的用法。

示例一：当Row中的组件不使用Expanded的时候

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.green,
            child: Row(children: <Widget>[
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              Image