Flutter實戰視頻-移動電商-49.詳細頁_Stack製做底部工具欄

49.詳細頁_Stack製做底部工具欄

一直懸浮在最下面的

Stack層疊組件。裏面用Row 能夠橫向佈局

開始

stack若是想定位就要用position去定位。

修改return返回值的這個地方

 

大R刷新查看效果，能夠看到固定的在左下角的測試的字樣。一直固定在底部

作底部的固定欄widget

新建頁面：在文件夾details_page/details_bottom.dart 在佈局用三個InkWell 由於都是能夠點擊的。

 

加入購物車的InkWell

當即購買，複製購物車的InkWell改改就能夠了。

引用這個組件

 

 

效果展現

 

最終代碼：

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 '完成加載';
  }

}