Flutter實戰視頻-移動電商-46.詳細頁_自定義TabBar Widget

46.詳細頁_自定義TabBar Widget

 主要實現詳情和評論的tab

provide定義變量

本身作一個tab而後用provide去控制

定義兩個變量來判斷是左側選中了仍是右側選中了。並定義一個方法來接受參數，修改是左側仍是右側選中的狀態值

新建組件頁面

details_page/details_tabbar.dart

 

而後定義方法_myTabbarLeft

　

左側tab的點擊事件，調用provide內的change方法傳入是left

把_myTabbarLeft方法複製一個改爲_myTabbarRight而後把參數什麼的也修改成右側的

 

build內合併方法

顯示聲明兩個變量 從provide中獲取isLeft和isRight

詳情添加引用這個組件

先引入組件：

import './details_page/details_tabbar.dart';

 

而後直接調用就能夠了。

 

修改爲ListView組件，防止溢出

效果展現

 

最終代碼：

provide/details_info.dart

import 'package:flutter/material.dart';
import '../model/details.dart';
import '../service/service_method.dart';
import 'dart:convert';

class DetailsInfoProvide with ChangeNotifier{
  //商品詳情的變量
  DetailsModel goodsInfo=null;

  bool isLeft=true;
  bool isRight=false;
  //tabbar的切換方法
  changeLeftAndRight(String changeState){
    if(changeState=='left'){
      isLeft=true;
      isRight=false;
    }else{
      isLeft=false;
      isRight=true;
    }
    notifyListeners();//通知
  }

  //從後臺獲取商品數據
  getGoodsInfo(String id){
    var formData={'goodId':id};
    request('getGoodDetailById',formData:formData).then((val){
      var responseData=json.decode(val.toString());
      print(responseData);//打印出返回的json數據
      goodsInfo=DetailsModel.fromJson(responseData);

      notifyListeners();//通知
    });
  }
}

details_page/details_tabbar.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DetailsTabbar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Provide<DetailsInfoProvide>(
      builder: (context,child,val){
        var isLeft=Provide.value<DetailsInfoProvide>(context).isLeft;
        var isRight=Provide.value<DetailsInfoProvide>(context).isRight;

        return Container(
          margin: EdgeInsets.only(top:15.0),
          child: Row(
            children: <Widget>[
              _myTabbarLeft(context,isLeft),
              _myTabbarRight(context,isRight)
            ],
          ),
        );
      },
    );
  }

  Widget _myTabbarLeft(BuildContext context,bool isLeft){
    return InkWell(
      onTap: (){
        Provide.value<DetailsInfoProvide>(context).changeLeftAndRight('left');
      },
      child: Container(
        padding: EdgeInsets.all(10.0),
        alignment: Alignment.center,
        width: ScreenUtil().setWidth(375),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: 1.0,
              color: isLeft?Colors.pink:Colors.black12
            )
          )
        ),
        child: Text(
          '詳情',
          style: TextStyle(
            color: isLeft?Colors.pink:Colors.black
          ),
        ),
      ),
    );
  }
  //右側tabbar的方法
  Widget _myTabbarRight(BuildContext context,bool isRight){
    return InkWell(
      onTap: (){
        Provide.value<DetailsInfoProvide>(context).changeLeftAndRight('right');
      },
      child: Container(
        padding: EdgeInsets.all(10.0),
        alignment: Alignment.center,
        width: ScreenUtil().setWidth(375),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: 1.0,
              color: isRight?Colors.pink:Colors.black12
            )
          )
        ),
        child: Text(
          '評論',
          style: TextStyle(
            color: isRight?Colors.pink:Colors.black
          ),
        ),
      ),
    );
  }

}

 

 

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';

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 Container(
              child: ListView(
                children: <Widget>[
                  DetailsTopArea(),
                  DetailsExplain(),
                  DetailsTabbar()
                ],
              ),
            );
          }else{
            return Text('加載中......');//沒有數據的狀況
          }
        },
      ),
    );
  }

  Future _getBackInfo(BuildContext context) async{
    await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
    //print('加載完成...........');
    return '完成加載';
  }

}