快捷導(dǎo)航

Flutter搞定寬高不統(tǒng)一布局開(kāi)發(fā)的方法詳解

更新時(shí)間：2023年06月05日 08:22:34 作者：島上碼農(nóng)

我們?cè)陂_(kāi)發(fā)移動(dòng)端界面的時(shí)候，經(jīng)常會(huì)遇到一組尺寸不一的組件需要作為同一組展示,所以本文就將利用Wrap組件搞定寬高不統(tǒng)一布局開(kāi)發(fā)，需要的可以參考一下

前言

我們?cè)陂_(kāi)發(fā)移動(dòng)端界面的時(shí)候，經(jīng)常會(huì)遇到一組尺寸不一的組件需要作為同一組展示，典型的就是下面這種搜索歷史。搜索內(nèi)容的文字長(zhǎng)短不一，導(dǎo)致顯示的寬度不一致。而且，需要根據(jù)屏幕的寬度來(lái)自動(dòng)換行顯示。這個(gè)時(shí)候，用行布局或者網(wǎng)格布局都滿足不了要求，那怎么辦呢？其實(shí) Flutter 為我們提供了很好的組件，那就是Wrap組件。

Wrap 組件簡(jiǎn)介

Wrap組件是一種動(dòng)態(tài)布局組件，非常適用于需要?jiǎng)討B(tài)調(diào)整子組件布局的場(chǎng)景，當(dāng)子組件的總寬度或高度超過(guò)父容器的寬度或高度時(shí)，它會(huì)自動(dòng)將子組件放置到新的行或列中。Wrap組件的定義如下：

Wrap({
  Key? key,
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0,
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.clipBehavior = Clip.none,
  List<Widget> children = const <Widget>[],
})

其中關(guān)鍵參數(shù)如下：

direction：布局方向，默認(rèn)橫向，即橫向擺不下的時(shí)候會(huì)另起一行；如果更改為縱向（vertical），那么會(huì)按縱向排布，縱向排不下的時(shí)候會(huì)另起一列。通常橫向布局會(huì)多一點(diǎn)。
alignment：主軸對(duì)齊方式，默認(rèn)是 start，橫向來(lái)說(shuō)是左對(duì)齊。也可以設(shè)置為右對(duì)齊（end），或居中（center）.
spacing：橫軸方向的間距大小。
runSpacing：縱軸方向的間距大小。
verticalDirection：換行或換列的方向，默認(rèn)是往下，如果改成向上（up），那么超出后會(huì)往上（橫向）另起一行，也就是從底部往上換行。這種其實(shí)比較少見(jiàn)。
children：也就是要子組件，通常會(huì)配合 Chip、InputChip 這樣的組件使用，其實(shí)任何組件都可以，比如圖片，按鈕都沒(méi)問(wèn)題。

Wrap 使用示例

我們這里使用 Wrap 組件包裹了 Chip 組件和圖片組件，代碼如下。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey[50],
    appBar:
        AppBar(title: const Text('Wrap'), backgroundColor: Colors.red[400]!),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Wrap(
            direction: Axis.horizontal,
            spacing: 8.0,
            alignment: WrapAlignment.start,
            verticalDirection: VerticalDirection.down,
            children: List.generate(
              _tagsLists.length,
              (index) => Chip(
                label: Text(_tagsLists[index]),
                backgroundColor: Colors.grey[300],
                labelStyle: const TextStyle(color: Colors.black87),
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: List.generate(
              _imagesLists.length,
              (index) => Container(
                width: 120,
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: DecorationImage(
                    image: AssetImage(_imagesLists[index]),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    ),
  );
}

實(shí)現(xiàn)的效果如下圖所示?？梢钥吹剑耆梢詽M足搜索頁(yè)或者是詳情頁(yè)的標(biāo)簽布局使用。而且，如果是數(shù)量有限的圖片、按鈕這類(lèi)的，也可以使用 Wrap 來(lái)替代GridView組件。

總結(jié)

本篇介紹了 Wrap 組件的定義和使用，如果有遇到子組件的尺寸不統(tǒng)一（通常會(huì)是橫向的寬度，縱向的高度），那么優(yōu)先建議使用 Wrap 組件來(lái)實(shí)現(xiàn)。典型的應(yīng)用場(chǎng)景就是歷史搜索、標(biāo)簽顯示等等。而且，如果是數(shù)量有限的網(wǎng)格式的布局（比如相關(guān)商品推薦），其實(shí)也可以用 Wrap 組件來(lái)替換 GridView 組件。本篇源碼已上傳至：實(shí)用組件相關(guān)代碼。

到此這篇關(guān)于Flutter搞定寬高不統(tǒng)一布局開(kāi)發(fā)的方法詳解的文章就介紹到這了,更多相關(guān)Flutter布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: