还是逃不开Flutter，趋势如此，近期Android转Flutter，UI编程首当其冲的是布局，现在我们来讨论一下Flutter中对的match_parent和wrap_content改怎么实现。
先搭建一个基础界面
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,
),
),
));
}
一个具有淡红色背景的基础类app界面就形成了，入下图所示
基础界面
Container中的match_parent和wrap_content
固定宽高
先在这个淡红色框里面放一个宽高是200的蓝色方框，添加红色方框的代码
代码
结果如下图所示：
一个宽高是200的蓝色方框1
这个时候我们发现淡红色大背景没有了，这是因为我们直接使用了默认的Container，修改一下对其方式就行，参考如下代码
代码
结果如下图所示
一个宽高是200的蓝色方框2
宽：match_parent，高固定
将蓝色框设置为match_parent，只需要将width设置为double.infinity即可，参考如下代码
代码
结果如下图所示
match_parent
宽：wrap_content，高固定
将蓝色框设置为wrap_content，只需要将width设置为null即可，参考如下代码
代码
结果如下图所示
wrap_content
注意：width设置为null这一行去掉效果也不会变；当child为null时，效果相当于match_parent
Column中的match_parent和wrap_content
固定宽高
宽：wrap_content，高：wrap_content
Container(
color: Colors.red,
child: const Text('Flutter', style: TextStyle(fontSize: 45))),
宽：match_parent，高：wrap_content
Container(
width: double.infinity,
color: Colors.orange,
child: const Text('Flutter', style: TextStyle(fontSize: 45))),
宽：wrap_content，高：match_parent
Expanded(
child: Container(
color: Colors.purpleAccent,
child: const Text('Flutter', style: TextStyle(fontSize: 45)))),
宽：match_parent，高：match_parent
Expanded(
child: Container(
width: double.infinity,
color: Colors.lightBlueAccent,
child: const Text('Flutter', style: TextStyle(fontSize: 45)))),
全部代码详情：
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)))),
],
),
),
));
}
结果如下图所示
Column
Wrap
Wrap具有自适应宽高的效果，参考如下代码
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'),
],
),
),
),
),
));
}
结果如下图所示
Wrap
参考网址：
1.Wrap_content and Match_parent for the Container in Flutter [February 2024] - FlutterBeads
2.dart - The equivalent of wrap_content and match_parent in flutter? - Stack Overflow
