12.11 底部按钮

12.11 底部按钮

实现步骤：

第 1 步：底部按钮

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 底部按钮
Widget _buildButtons() {
  return controller.product == null
      ? const SizedBox.shrink()
      : <Widget>[
          // 加入购物车
          ButtonWidget.secondary(
            LocaleKeys.gDetailBtnAddCart.tr,
          ).expanded(),

          // 间距
          SizedBox(width: AppSpace.iconTextLarge),

          // 立刻购买
          ButtonWidget.primary(
            LocaleKeys.gDetailBtnBuy.tr,
          ).expanded(),
        ]
          .toRow(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
          )
          .paddingHorizontal(AppSpace.page);
}

第 2 步：按设计稿需求 浮动

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@override
Widget build(BuildContext context) {
  return GetBuilder<ProductDetailsController>(
    init: ProductDetailsController(),
    id: "product_details",
    // 4 GetBuilder 属性 tag 设置
    tag: tag,
    builder: (_) {
      return Scaffold(
        // 导航
        appBar: mainAppBarWidget(titleString: LocaleKeys.gDetailTitle.tr),
        // 内容
        body: SafeArea(
          child: <Widget>[
            // 主视图
            _buildView(),
            // 底部按钮
            _buildButtons().positioned(
              bottom: 10,
              left: 0,
              right: 0,
            ),
          ].toStack(),
        ),
      );
    },
  );
}

positioned 左、下、右 都是 0，固定好位置和区域

判断不为空显示组件，还有这样写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 底部按钮
Widget _buildButtons() {
  return <Widget>[
    ...
      .paddingHorizontal(AppSpace.page);
}

        // 内容
        body: SafeArea(
          child: <Widget>[
            // 主视图
            _buildView(),

            // 底部按钮
            if (controller.product != null)
              _buildButtons().positioned(
                left: 0,
                bottom: 0,
                right: 0,
              ),
          ].toStack(),
        ),

if (controller.product != null) 加入一个 if 条件去判断是否加入组件

提交代码到 git