Flutter移动电商实战 --（49）详细页_Stack制作底部工具栏

灰太狼 2023-06-01 06:06 25阅读 0赞

一直悬浮在最下面的

![1090399-20190915221109214-1082462432.png][]

Stack层叠组件。里面用Row 可以横向布局

# 开始 #

stack如果想定位就要用position去定位。

修改return返回值的这个地方

![1090399-20190915221140647-159587891.png][]

![1090399-20190915221210267-246897579.png][]

大R刷新查看效果，可以看到固定的在左下角的测试的字样。一直固定在底部

![1090399-20190915221243381-76437457.png][]

# 做底部的固定栏widget #

新建页面：在文件夹details\_page/details\_bottom.dart 在布局用三个InkWell 因为都是可以点击的

![1090399-20190915221322130-393515445.png][]

加入购物车的InkWell

![1090399-20190915221354699-131272278.png][]

立即购买，复制购物车的InkWell改改就可以了。

![1090399-20190915221431845-1354689171.png][]

# 引用这个组件 #

![1090399-20190915221507336-586169311.png][]

# 效果展示 #

![1090399-20190915221536993-146374103.png][]

# 最终代码： #

details\_bottom.dart

import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    
    class DetailsBottom extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: ScreenUtil().setWidth(750),
          color: Colors.white,
          height: ScreenUtil().setHeight(80),
          child: Row(
            children: <Widget>[
              InkWell(
                onTap: (){},
                child: Container(
                  width: ScreenUtil().setWidth(110),
                  alignment: Alignment.center,
                  child: Icon(
                    Icons.shopping_cart,
                    size:35,//图标没有自适应 要是设置size的大小
                    color: Colors.red,
                  ),
                ),            
              ),
              InkWell(
                onTap: (){},
                child: Container(
                  alignment: Alignment.center,
                  width: ScreenUtil().setWidth(320),//750 - 110 再除以2 评分
                  height: ScreenUtil().setHeight(80),
                  color: Colors.green,
                  child: Text(
                    '加入购物车',
                    style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
                  ),
                ),
              ),
              InkWell(
                onTap: (){},
                child: Container(
                  alignment: Alignment.center,
                  width: ScreenUtil().setWidth(320),//750 - 110 再除以2 评分
                  height: ScreenUtil().setHeight(80),
                  color: Colors.red,
                  child: Text(
                    '立即购买',
                    style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
                  ),
                ),
              )
            ],
          ),
        );
      }
    }

details\_page.dart

import 'package:flutter/material.dart';
    import 'package:provide/provide.dart';
    import '../provide/details_info.dart';
    import './details_page/details_top_area.dart';
    import './details_page/details_expain.dart';
    import './details_page/details_tabbar.dart';
    import './details_page/details_web.dart';
    import './details_page/details_bottom.dart';
    
    class DetailsPage extends StatelessWidget {
      final String goodsId;
    
      DetailsPage(this.goodsId);//flutter 1.2的最新的写法 构造函数
    
      @override
      Widget build(BuildContext context) {
     
        return Scaffold(
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: (){
                Navigator.pop(context);//返回上一个页面
              },
            ),
            title: Text('商品详细页'),
          ),
          body: FutureBuilder(
            future: _getBackInfo(context),
            builder: (context,snapshot){
              //判断是否有数据
              if(snapshot.hasData){
                //如果有数据返回一个Container
                return Stack(
                  children: <Widget>[
                    Container(
                      child: ListView(
                        children: <Widget>[
                          DetailsTopArea(),
                          DetailsExplain(),
                          DetailsTabbar(),
                          DetailsWeb()
                        ],
                      ),
                    ),
    
                    Positioned(
                      bottom: 0,
                      left: 0,
                      child: DetailsBottom(),
                    )
                  ],
                );
              }else{
                return Text('加载中......');//没有数据的情况
              }
            },
          ),
        );
      }
    
      Future _getBackInfo(BuildContext context) async{
        await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
        //print('加载完成...........');
        return '完成加载';
      }
    
    }

转载于:https://www.cnblogs.com/crazycode2/p/11524489.html

[1090399-20190915221109214-1082462432.png]: /images/20230601/4772ff60234b40bd81f6d237660c701f.png
[1090399-20190915221140647-159587891.png]: /images/20230601/9939c674719f4e50bec93b0544e3f602.png
[1090399-20190915221210267-246897579.png]: /images/20230601/7989c498766f4808bed48a118ffb48e7.png
[1090399-20190915221243381-76437457.png]: /images/20230601/4711e66d94704670bcfb4a185eec3ab5.png
[1090399-20190915221322130-393515445.png]: /images/20230601/afd1865494bb4cfbb9abe8ad0354bb29.png
[1090399-20190915221354699-131272278.png]: /images/20230601/cbd97a486e954003a1582cefcc0b41b5.png
[1090399-20190915221431845-1354689171.png]: /images/20230601/79f1228b284e40709bb43c161de0ca45.png
[1090399-20190915221507336-586169311.png]: /images/20230601/0cb6af8774e248859f1b6fed893c2d88.png
[1090399-20190915221536993-146374103.png]: /images/20230601/765393d61285438dabbbe10843605f1e.png