還是逃不開Flutter，趨勢(shì)如此趁尼，近期Android轉(zhuǎn)Flutter捺萌，UI編程首當(dāng)其沖的是布局拍皮，現(xiàn)在我們來(lái)討論一下Flutter中對(duì)的match_parent和wrap_content改怎么實(shí)現(xiàn)怀偷。

先搭建一個(gè)基礎(chǔ)界面

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,
      ),
    ),
  ));
}

一個(gè)具有淡紅色背景的基礎(chǔ)類app界面就形成了抄瓦，入下圖所示

基礎(chǔ)界面

Container中的match_parent和wrap_content

固定寬高

先在這個(gè)淡紅色框里面放一個(gè)寬高是200的藍(lán)色方框济竹，添加紅色方框的代碼

代碼

結(jié)果如下圖所示：

一個(gè)寬高是200的藍(lán)色方框1

這個(gè)時(shí)候我們發(fā)現(xiàn)淡紅色大背景沒(méi)有了伟恶，這是因?yàn)槲覀冎苯邮褂昧四J(rèn)的Container，修改一下對(duì)其方式就行哼鬓，參考如下代碼

代碼

結(jié)果如下圖所示

一個(gè)寬高是200的藍(lán)色方框2

寬：match_parent监右，高固定

將藍(lán)色框設(shè)置為match_parent，只需要將width設(shè)置為double.infinity即可异希，參考如下代碼

代碼

結(jié)果如下圖所示

match_parent

寬：wrap_content健盒，高固定

將藍(lán)色框設(shè)置為wrap_content，只需要將width設(shè)置為null即可称簿，參考如下代碼

代碼

結(jié)果如下圖所示

wrap_content

注意：width設(shè)置為null這一行去掉效果也不會(huì)變扣癣；當(dāng)child為null時(shí)，效果相當(dāng)于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)))),
        ],
      ),
    ),
  ));
}

結(jié)果如下圖所示

Column

Wrap

Wrap具有自適應(yīng)寬高的效果频轿，參考如下代碼

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('好好學(xué)習(xí)天天向上'),
              Text('前途無(wú)量'),
              Text('hello world'),
            ],
          ),
        ),
      ),
    ),
  ));
}

結(jié)果如下圖所示

Wrap

參考網(wǎng)址：
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