Flutter移动电商实战 --（46）详细页_自定义TabBar Widget

女爷i 2023-06-01 06:05 17阅读 0赞

主要实现详情和评论的tab

![1090399-20190915214742291-1748916481.png][]

# provide定义变量 #

自己做一个tab然后用provide去控制

定义两个变量来判断是左侧选中了还是右侧选中了。并定义一个方法来接受参数，修改是左侧还是右侧选中的状态值

![1090399-20190915214808279-1713954459.png][]

# 新建组件页面 #

details\_page/details\_tabbar.dart

![1090399-20190915214836994-362647757.png][]

然后定义方法\_myTabbarLeft

![1090399-20190915214912807-601531321.png][]

左侧tab的点击事件，调用provide内的change方法传入是left

![1090399-20190915214944877-1681950014.png][]

把\_myTabbarLeft方法复制一个改成\_myTabbarRight然后把参数什么的也修改为右侧的

![1090399-20190915215032135-945432548.png][]

# build内合并方法 #

显示声明两个变量 从provide中获取isLeft和isRight

![1090399-20190915215106168-125175484.png][]

# 详情添加引用这个组件 #

先引入组件：

import './details_page/details_tabbar.dart';

然后直接调用就可以了

![1090399-20190915215150969-2030421892.png][]

修改成ListView组件，防止溢出

![1090399-20190915215219526-987554438.png][]

# 效果展示 #

![1090399-20190915215248622-287938163.png][]

# 最终代码： #

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

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

[1090399-20190915214742291-1748916481.png]: /images/20230601/171cd9c559e24bc5a9d4571eff85528f.png
[1090399-20190915214808279-1713954459.png]: /images/20230601/b697d0efaac2483f9f1da89e63ddf405.png
[1090399-20190915214836994-362647757.png]: /images/20230601/ef0dd451e7d547a3ae1acaa9058c8fce.png
[1090399-20190915214912807-601531321.png]: /images/20230601/d4ba62eca73d4cdcb9fc7862fced3443.png
[1090399-20190915214944877-1681950014.png]: /images/20230601/fb32d197cbaf48c98945c52d52a7e5e3.png
[1090399-20190915215032135-945432548.png]: /images/20230601/bcff2d89254d4a9a8318ab057f7e1c9a.png
[1090399-20190915215106168-125175484.png]: /images/20230601/ead419042c324e35b0d7f362a0ff1b2c.png
[1090399-20190915215150969-2030421892.png]: /images/20230601/ccd9738050bd41718b134814e7a5cb32.png
[1090399-20190915215219526-987554438.png]: /images/20230601/1b93ae5166024a0a9df6d47d905acb1e.png
[1090399-20190915215248622-287938163.png]: /images/20230601/b78f3344e76b45ea90332424f7e2013d.png