Flutter中Expanded与Flexible的区别？

Flutter中Expanded与Flexible的区别？

在 Flutter 中，Expanded 和 Flexible 都是用于在 Row、Column 等布局中按比例分配空间的组件。虽然它们有相似之处，但有一些关键区别。

1. 基本作用

• Flexible：

  • 可以根据剩余空间大小来调整自身的大小，但不会强制填满剩余空间。

• Expanded：

  • 是 Flexible 的子类，且 flex 参数默认为 1，它会强制子组件填满所有剩余空间。

2. flex 参数

• Flexible：

  • 可以设置 flex 参数，指定子组件占用的比例。
  • Flexible 不会强制填满空间，而是允许子组件根据自己的内容尺寸和比例灵活调整。

• Expanded：

  • 继承了 Flexible 并且默认 flex 值为 1。
  • 所以 Expanded 始终填满剩余空间，除非 flex 被设置为 0。

3. 使用方式

• Flexible：

  • 适合在需要按比例调整子组件大小，但允许它们根据内容大小有所变化的场景。
  • 例如，某些组件占据一部分剩余空间，但不填满整个区域。

• Expanded：

  • 适合在需要填满所有剩余空间的情况下使用，通常用于填充布局中的剩余区域。

示例对比

Flexible 示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flexible Example'),
        ),
        body: Row(
          children: [
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.red,
                child: Center(child: Text('Red Container')),
              ),
            ),
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.blue,
                child: Center(child: Text('Blue Container')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，两个 Flexible 子组件按比例分配剩余空间，但会根据内容自适应。红色容器占 2/3 的剩余空间，蓝色容器占 1/3 的空间。

Expanded 示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expanded Example'),
        ),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.red,
                child: Center(child: Text('Red Container')),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Center(child: Text('Blue Container')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，Expanded 会强制填满剩余空间。红色和蓝色容器各自占 50% 的空间，因为 Expanded 强制填满所有可用的空间。

4. 适用场景

• Flexible：

  • 适合需要按比例分配空间，但允许子组件根据内容大小灵活调整时使用。

• Expanded：

  • 适合需要占据整个剩余空间的场景，比如一个内容区域需要填充整个可用空间。

总结特性

通常在需要填满剩余空间的情况时使用 Expanded，而在需要按比例分配空间但保留内容灵活性时使用 Flexible。