Flutter 仿京东商品详情底部操作栏

前言

不知道大家有没有留神京东 App的产品概略页，在底部有5个操作按钮，分成了3组，然后每一组占了1/3的宽度。这种布局，简略直接的办法是写死每一组宽度为屏幕宽度的1/3。能用，可是不太高雅。

本篇我们就来介绍一个布局组件，能够通过比例控制子组件的标准，然后能够抵达相似京东底部操作按钮这种布局效果。这个组件就是FractionallySizedBox。

FractionallySizedBox介绍

看组件称号就知道这是一个按比例控制的布局组件，FractionallySizedBox用于控制其子组件在它的父组件的控件宽高占比，定义如下：

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

能够看到，其实非常简略，总共就4个参数：

• alignment：子组件相对父组件的对齐办法，默许是居中；
• widthFactor：子组件宽度占父组件的比例，需求大于等于0，为空的话则由外部控制子组件的宽度；
• heightFactor：子组件高度度占父组件的比例，为空的话则由外部控制子组件的高度；
• child：被控制布局的子组件。

我们看一个简略的比方，我们在屏幕中心显现3个矩形框，然后每个矩形框都是上一个的一半标准，如下图所示。

对应的代码如下：

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组。其间左边的图标按钮又是一个行组件。每一组内的宽高我们能够通过FractionallySizedBox来通过比例约束，然后确保了不同屏幕标准自适应。

留意的是，根据官方说明，要将FractionallySizedBox作为 Row 组件的子组件，需求运用一个Flexible组件包裹FractionallySizedBox。因而，我们需求运用三个 Flexible 弹性布局组件作为 Row 组件的子组件，设置每个 Flexible 组件的的 flex 参数都是1，这样就能够实现3等分了。当然，我们也能够调整为不同的flex值，抵达不等分的效果。

接下来就是用FractionallySizedBox来设置具体操作元素的标准了，我们共同设置宽度占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,
                ),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
),

实现效果如下图所示，实际运用的时分我们能够根据需求调整宽度和高度比例，源码义提交至：Flutter 组件相关代码。

总结

简略总结一下，我们能够看到，其实上面的比方不必FractionallySizedBox来做，我们的可选择的布局计划也会有很多种。可是假设不熟悉 Flutter 的布局组件的话，我们会感觉无从下手。个人的主张是，大家能够到 Flutter 官方的组件介绍中熟悉一些常用的组件。Flutter 官方的组件介绍文档链接为：docs.flutter.dev/ui/widgets，里边贴心肠对组件做了分类。

我是岛上码农，微信公众号同名。如有问题能够加自己微信沟通，微信号：island-coder。

：觉得有收获请点个赞鼓励一下！

：收藏文章，方便回看哦！

：议论沟通，彼此进步！