Flutter 2-9 UI布局和Widget——弹性布局控件Flexible | 七日打卡

2023-11-05 07:55:50

Flexible 和 Expanded：掌控 Flutter 中的布局

在 Flutter 中，布局是一个至关重要的方面，它决定了应用程序中不同元素的外观和感觉。Flexible 和 Expanded 是两个强大的控件，可帮助您创建灵活且可调整的布局。本文将深入探讨这两个控件的用法、区别以及最佳使用场景。

Flexible

简介

Flexible 控件允许您指定子元素在父元素中占据的空间比例。通过设置 flex 参数，您可以控制子元素相对于父元素的大小。flex 值越大，子元素占据的父元素空间就越多。

语法

Flexible({
  int flex = 1, // 子元素相对于父元素的空间比例
  Widget child, // 子元素
})

用法

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

在这个示例中，第一个子元素将占据父元素的 2/3 空间，而第二个子元素将占据 1/3 空间。

Expanded

简介

Expanded 控件与 Flexible 类似，但它没有 flex 参数。它会自动占据父元素的剩余空间。换句话说，当 Expanded 控件是父元素的最后一个子元素时，它将填充所有剩余空间。

语法

Expanded({
  Widget child, // 子元素
})

用法

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

在这个示例中，两个子元素将平均分配父元素的剩余空间。

Flexible 和 Expanded 的比较

尽管 Flexible 和 Expanded 都是用于布局的控件，但它们有一些关键的区别：

flex 参数： Flexible 控件具有 flex 参数，可指定子元素占父元素的空间比例，而 Expanded 控件没有此参数。
剩余空间： Flexible 控件只占用指定比例的空间，而 Expanded 控件自动占用父元素的剩余空间。
组合使用： Flexible 控件可以与其他 Flexible 控件一起使用以按比例分配父元素的空间，而 Expanded 控件只能与其他 Expanded 控件一起使用。

何时使用 Flexible 和 Expanded

Flexible

当您需要按特定比例分配父元素的空间时。
当您需要动态调整子元素相对于父元素的大小时。

Expanded

当您需要自动填充父元素的剩余空间时。
当您需要在父元素的所有子元素之间平均分配剩余空间时。

示例

弹性布局

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

流体布局

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

复杂布局

Column(
  children: [
    Row(
      children: [
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.red,
          ),
        ),
        Flexible(
          flex: 1,
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
);