快捷導(dǎo)航

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

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

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

前言

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

Wrap 組件簡介

Wrap組件是一種動態(tài)布局組件，非常適用于需要動態(tài)調(diào)整子組件布局的場景，當(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)橫向，即橫向擺不下的時候會另起一行；如果更改為縱向（vertical），那么會按縱向排布，縱向排不下的時候會另起一列。通常橫向布局會多一點。
alignment：主軸對齊方式，默認(rèn)是 start，橫向來說是左對齊。也可以設(shè)置為右對齊（end），或居中（center）.
spacing：橫軸方向的間距大小。
runSpacing：縱軸方向的間距大小。
verticalDirection：換行或換列的方向，默認(rèn)是往下，如果改成向上（up），那么超出后會往上（橫向）另起一行，也就是從底部往上換行。這種其實比較少見。
children：也就是要子組件，通常會配合 Chip、InputChip 這樣的組件使用，其實任何組件都可以，比如圖片，按鈕都沒問題。

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

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

總結(jié)

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

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

您可能感興趣的文章: