Flutter實(shí)現(xiàn)仿京東商品詳情底部操作欄

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

這篇文章主要為大家詳細(xì)介紹了Flutter如何仿京東實(shí)現(xiàn)商品詳情底部操作欄，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下

前言

不知道大家有沒(méi)有留意京東 App的商品詳情頁(yè)，在底部有5個(gè)操作按鈕，分成了3組，然后每一組占了1/3的寬度。這種布局，簡(jiǎn)單直接的方法是寫(xiě)死每一組寬度為屏幕寬度的1/3。能用，但是不太優(yōu)雅。

本篇我們就來(lái)介紹一個(gè)布局組件，能夠通過(guò)比例控制子組件的尺寸，從而可以達(dá)到類(lèi)似京東底部操作按鈕這種布局效果。這個(gè)組件就是FractionallySizedBox。

FractionallySizedBox介紹

看組件名稱就知道這是一個(gè)按比例控制的布局組件，FractionallySizedBox用于控制其子組件在它的父組件的控件寬高占比，定義如下：

const FractionallySizedBox({
  Key? key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget? child,
})

可以看到，其實(shí)非常簡(jiǎn)單，總共就4個(gè)參數(shù)：

alignment：子組件相對(duì)父組件的對(duì)齊方式，默認(rèn)是居中；
widthFactor：子組件寬度占父組件的比例，需要大于等于0，為空的話則由外部控制子組件的寬度；
heightFactor：子組件高度度占父組件的比例，為空的話則由外部控制子組件的高度；
child：被控制布局的子組件。

我們看一個(gè)簡(jiǎn)單的例子，我們?cè)谄聊恢虚g顯示3個(gè)矩形框，然后每個(gè)矩形框都是上一個(gè)的一半尺寸，如下圖所示。

對(duì)應(yīng)的代碼如下：

body: Center(
  child: FractionallySizedBox(
    widthFactor: 0.5,
    heightFactor: 0.5,
    child: Container(
      color: Colors.red[200],
      child: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          color: Colors.red[400],
          child: FractionallySizedBox(
            widthFactor: 0.5,
            heightFactor: 0.5,
            child: Container(
              color: Colors.red[600],
            ),
          ),
        ),
      ),
    ),
  ),
),

仿京東商品詳情底部操作欄

接下來(lái)我們來(lái)仿一下京東商品詳情的操作欄。分析一下布局，實(shí)際上可以看作是一個(gè)分成了3等分的行組件，然后被分成了3組。其中左側(cè)的圖標(biāo)按鈕又是一個(gè)行組件。每一組內(nèi)的寬高我們可以通過(guò)FractionallySizedBox來(lái)通過(guò)比例限制，從而保證了不同屏幕尺寸自適應(yīng)。

注意的是，根據(jù)官方說(shuō)明，要將FractionallySizedBox作為 Row 組件的子組件，需要使用一個(gè)Flexible組件包裹FractionallySizedBox。因此，我們需要使用三個(gè) Flexible 彈性布局組件作為 Row 組件的子組件，設(shè)置每個(gè) Flexible 組件的的 flex 參數(shù)都是1，這樣就能夠?qū)崿F(xiàn)3等分了。當(dāng)然，我們也可以調(diào)整為不同的flex值，達(dá)到不等分的效果。

接下來(lái)就是用FractionallySizedBox來(lái)設(shè)置具體操作元素的尺寸了，我們統(tǒng)一設(shè)置寬度占85%，高度占60%。最終的代碼如下所示。

bottomSheet: Container(
  height: 68,
  decoration: BoxDecoration(
      color: Colors.black87,
      border: Border(
        top: BorderSide(
            width: 1.0, color: Colors.grey[300]!.withAlpha(20)),
      )),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Flexible(
        flex: 1,
        child: FractionallySizedBox(
          widthFactor: _widthFactor,
          heightFactor: _heightFactor,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              Icon(
                Icons.shopify,
                color: Colors.red,
              ),
              Icon(
                Icons.favorite_outline,
                color: Colors.red,
              ),
              Icon(
                Icons.star_border,
                color: Colors.red,
              )
            ],
          ),
        ),
      ),
      Flexible(
        flex: 1,
        child: FractionallySizedBox(
          widthFactor: _widthFactor,
          heightFactor: _heightFactor,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.yellow[700],
              borderRadius: const BorderRadius.all(
                Radius.circular(20.0),
              ),
            ),
            child: TextButton(
              onPressed: () {},
              child: const Text(
                '加入購(gòu)物車(chē)',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
      Flexible(
        flex: 1,
        child: FractionallySizedBox(
          widthFactor: _widthFactor,
          heightFactor: _heightFactor,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red[600],
              borderRadius: const BorderRadius.all(
                Radius.circular(20.0),
              ),
            ),
            child: TextButton(
              onPressed: () {},
              child: const Text(
                '立即購(gòu)買(mǎi)',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
),

實(shí)現(xiàn)效果如下圖所示，實(shí)際使用的時(shí)候我們可以根據(jù)需要調(diào)整寬度和高度比例，源碼義提交至：Flutter 組件相關(guān)代碼。

總結(jié)

簡(jiǎn)單總結(jié)一下，我們可以看到，其實(shí)上面的例子不用FractionallySizedBox來(lái)做，我們的可選擇的布局方案也會(huì)有很多種。然而如果不熟悉 Flutter 的布局組件的話，我們會(huì)感覺(jué)無(wú)從下手。個(gè)人的建議是，大家可以到 Flutter 官方的組件介紹中熟悉一些常用的組件。Flutter 官方的組件介紹文檔鏈接為：docs.flutter.dev/ui/widgets，里面貼心地對(duì)組件做了分類(lèi)。

到此這篇關(guān)于Flutter實(shí)現(xiàn)仿京東商品詳情底部操作欄的文章就介紹到這了,更多相關(guān)Flutter底部操作欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: