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

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

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

前言

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

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

FractionallySizedBox介紹

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

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

可以看到，其實非常簡單，總共就4個參數(shù)：

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

我們看一個簡單的例子，我們在屏幕中間顯示3個矩形框，然后每個矩形框都是上一個的一半尺寸，如下圖所示。

對應(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],
            ),
          ),
        ),
      ),
    ),
  ),
),

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

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

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

接下來就是用FractionallySizedBox來設(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(
                '加入購物車',
                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(
                '立即購買',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
),

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

總結(jié)

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

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

您可能感興趣的文章: