Flutter 中常用的布局 Widget 有哪些？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

Container

Container 是一个多功能的布局 Widget，它可以设置宽度、高度、边距、内边距、背景颜色等属性。Container 通常用于包裹其他 Widget，并为它们提供样式和布局约束。

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text('Hello, World!'),
);

Row 和 Column

Row 和 Column 是用于在水平和垂直方向上排列子 Widget 的布局 Widget。Row 将子 Widget 水平排列，而 Column 将子 Widget 垂直排列。

// www.javascriptcn.com code example
Row(
  children: <Widget>[
    Text('First'),
    Text('Second'),
  ],
);

Column(
  children: <Widget>[
    Text('First'),
    Text('Second'),
  ],
);

Stack

Stack 允许子 Widget 堆叠在一起，通常用于重叠布局。Stack 的子 Widget 可以通过 Positioned Widget 来定位。

// www.javascriptcn.com code example
Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
);

Expanded 和 Flexible

Expanded 和 Flexible 用于在 Row 或 Column 中分配剩余空间。Expanded 会强制子 Widget 占据所有剩余空间，而 Flexible 则允许子 Widget 根据需要进行伸缩。

// www.javascriptcn.com code example
Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Flexible(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

ListView

ListView 用于创建可滚动的列表布局。它可以垂直或水平滚动，并且支持多种构造函数，如 ListView.builder、ListView.separated 等。

// www.javascriptcn.com code example
ListView(
  children: <Widget>[
    ListTile(
      title: Text('Item 1'),
    ),
    ListTile(
      title: Text('Item 2'),
    ),
  ],
);

GridView

GridView 用于创建网格布局。它支持多种构造函数，如 GridView.count、GridView.builder 等。

// www.javascriptcn.com code example
GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  }),
);

Padding

Padding 用于设置子 Widget 的内边距。它通常用于为子 Widget 添加额外的空间。

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, World!'),
);

Align

Align 用于将子 Widget 对齐到父容器的特定位置。它可以通过 alignment 属性来指定对齐方式。

Align(
  alignment: Alignment.bottomRight,
  child: Text('Hello, World!'),
);

Center

Center 用于将子 Widget 居中显示。它通常用于将子 Widget 放置在父容器的中心位置。

Center(
  child: Text('Hello, World!'),
);

AspectRatio

AspectRatio 用于设置子 Widget 的宽高比。它通常用于保持子 Widget 的宽高比例。

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    color: Colors.blue,
  ),
);

ConstrainedBox

ConstrainedBox 用于对子 Widget 施加额外的约束。它通常用于限制子 Widget 的大小。

// www.javascriptcn.com code example
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 200,
    maxHeight: 200,
  ),
  child: Container(
    color: Colors.blue,
  ),
);

SizedBox

SizedBox 用于设置固定大小的盒子，通常用于占位或设置间距。

SizedBox(
  width: 100,
  height: 100,
  child: Text('Hello, World!'),
);

Wrap

Wrap 用于在空间不足时自动换行排列子 Widget。它通常用于处理多个子 Widget 的排列问题。

// www.javascriptcn.com code example
Wrap(
  children: List.generate(10, (index) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.blue,
      child: Center(
        child: Text('$index'),
      ),
    );
  }),
);

Flow

Flow 用于自定义布局，允许更复杂的布局逻辑。它通常用于需要精确控制子 Widget 位置的场景。

// www.javascriptcn.com code example
Flow(
  delegate: CustomFlowDelegate(),
  children: List.generate(10, (index) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.blue,
      child: Center(
        child: Text('$index'),
      ),
    );
  }),
);

Flutter 中常用的布局 Widget 有哪些？

推荐答案