Flutter中的match_parent和wrap_conte

还是逃不开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