Flutter 是一个流行的跨平台移动应用开发框架，近年来越来越多的开发者开始转向 Flutter。在 UI 编程中，布局是重中之重。本文将讨论如何在 Flutter 中实现 match_parent 和 wrap_content。
首先，我们来搭建一个基础界面。以下是代码：
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('match&wrap')),
body: Container(
color: Colors.redAccent.shade100,
),
),
));
}
```
这段代码创建了一个具有淡红色背景的基础界面。接下来，我们将在这个淡红色框里放一个宽高为 200 的蓝色方框，并设置其颜色。为了实现这一点，我们需要修改 Container 的宽度和高度属性。以下是修改后的代码：
```dart
Container(
width: double.infinity, // 或者使用 null
height: 200,
color: Colors.blue,
)
```
这样，我们就得到了一个宽高为 200 的蓝色方框。但是，我们发现淡红色背景消失了。这是因为我们直接使用了默认的 Container。为了解决这个问题，我们需要修改 Container 的宽度和高度属性。以下是修改后的代码：
```dart
Container(
width: double.infinity, // 或者使用 null
height: double.infinity, // 或者使用 null
color: Colors.blue,
)
```
现在，我们得到了一个宽高为 200 的蓝色方框，且淡红色背景仍然存在。这就是如何使用 match_parent 实现固定宽高的容器。
接下来，我们将展示如何使用 wrap_content 实现固定高的容器。以下是修改后的代码：
```dart
Container(
width: double.infinity, // 或者使用 null
height: wrap_content, // 或者使用 null
color: Colors.blue,
)
```
通过将高度设置为 wrap_content,我们得到了一个宽高自适应的蓝色方框。这就是如何使用 wrap_content 实现固定高的容器。
```dart
Container(
color: Colors.red,
child: const Text('Flutter', style: TextStyle(fontSize: 45)),
)
Container(
width: double.infinity,
color: Colors.orange,
child: const Text('Flutter', style: TextStyle(fontSize: 45)),
)
Expanded(
child: Container(
color: Colors.purpleAccent,
child: const Text('Flutter', style: TextStyle(fontSize: 45)),
),
)
Expanded(
child: Container(
width: double.infinity,
color: Colors.lightBlueAccent,
child: const Text('Flutter', style: TextStyle(fontSize: 45)),
),
)
```
以下是重构后的代码：
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('match&wrap')),
body: Column(
children: [
Container(
color: Colors.red,
child: const Text('Flutter', style: TextStyle(fontSize: 45))),
Container(
width: double.infinity,
color: Colors.orange,
child: const Text('Flutter', style: TextStyle(fontSize: 45))),
Expanded(
child: Container(
color: Colors.purpleAccent,
child: const Text('Flutter', style: TextStyle(fontSize: 45)))),
Expanded(
child: Container(
width: double.infinity,
color: Colors.lightBlueAccent,
child: const Text('Flutter', style: TextStyle(fontSize: 45)))),
],
),
),
));
}
```
结果如下图所示
Wrap具有自适应宽高的效果，参考如下代码：
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('match&wrap')),
body: Container(
alignment: Alignment.topLeft,
color: Colors.redAccent.shade100,
child: Container(
color: Colors.blue,
child: const Wrap(
direction: Axis.vertical,
children: [
Text('ABCDEFG'),
Text('好好学习天天向上'),
Text('前途无量'),
Text('hello world'),
],
),
),
),
),
));
}
```
