18 Flutter仿京东商城项目商品详情顶部tab切换顶部下拉菜单底部浮动导航

r囧r小猫 2023-08-17 15:58 112阅读 0赞

![1057166-20190903231543332-478389234.png][]![1057166-20190903231622257-805404570.png][]

ProductContent.dart

import 'package:flutter/material.dart';
    import '../services/ScreenAdaper.dart';
    import 'ProductContent/ProductContentFirst.dart';
    import 'ProductContent/ProductContentSecond.dart';
    import 'ProductContent/ProductContentThird.dart';
    
    class ProductContentPage extends StatefulWidget {
      final Map arguments;
      ProductContentPage({Key key, this.arguments}) : super(key: key);
    
      _ProductContentPageState createState() => _ProductContentPageState();
    }
    
    class _ProductContentPageState extends State<ProductContentPage> {
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              title: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: ScreenAdaper.width(400),
                    child: TabBar(
                      indicatorColor: Colors.red,
                      indicatorSize: TabBarIndicatorSize.label,
                      tabs: <Widget>[
                        Tab(
                          child: Text('商品'),
                        ),
                        Tab(
                          child: Text('详情'),
                        ),
                        Tab(
                          child: Text('评价'),
                        )
                      ],
                    ),
                  )
                ],
              ),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.more_horiz),
                  onPressed: () {
                    showMenu(
                        context: context,
                        position: RelativeRect.fromLTRB(
                            ScreenAdaper.width(600), 76, 10, 0),
                        items: [
                          PopupMenuItem(
                            child: Row(
                              children: <Widget>[Icon(Icons.home), Text('首页')],
                            ),
                          ),
                          PopupMenuItem(
                            child: Row(
                              children: <Widget>[Icon(Icons.search), Text('搜索')],
                            ),
                          ),
                        ]);
                  },
                )
              ],
            ),
            body: Stack(
              children: <Widget>[
                TabBarView(
                  children: <Widget>[
                    ProductContentFirst(),
                    ProductContentSecond(),
                    ProductContentThird()
                  ],
                ),
                Positioned(
                  width: ScreenAdaper.width(750),
                  height: ScreenAdaper.height(80),
                  bottom: 0,
                  child: Container(
                    color: Colors.red,
                    child: Text('底部'),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

ProductContentFirst.dart

import 'package:flutter/material.dart';
    class ProductContentFirst extends StatefulWidget {
      ProductContentFirst({Key key}) : super(key: key);
    
      _ProductContentFirstState createState() => _ProductContentFirstState();
    }
    
    class _ProductContentFirstState extends State<ProductContentFirst> {
      @override
      Widget build(BuildContext context) {
        return Container(
           child: Text('商品'),
        );
      }
    }

ProductContentSecond.dart

import 'package:flutter/material.dart';
    class ProductContentSecond extends StatefulWidget {
      ProductContentSecond({Key key}) : super(key: key);
    
      _ProductContentSecondState createState() => _ProductContentSecondState();
    }
    
    class _ProductContentSecondState extends State<ProductContentSecond> {
      @override
      Widget build(BuildContext context) {
        return Container(
           child: Text('商品详情'),
        );
      }
    }

ProductContentThird.dart

import 'package:flutter/material.dart';
    class ProductContentThird extends StatefulWidget {
      ProductContentThird({Key key}) : super(key: key);
    
      _ProductContentThirdState createState() => _ProductContentThirdState();
    }
    
    class _ProductContentThirdState extends State<ProductContentThird> {
      @override
      Widget build(BuildContext context) {
        return Container(
           child: Text('商品评论'),
        );
      }
    }

Home.dart

import 'package:flutter/material.dart';
    import '../../services/SearchServices.dart';
    
    //热门推荐：
    import '../../model/ProductModel.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    // import 'dart:convert';
    import '../../services/ScreenAdaper.dart';
    import '../../config/Config.dart';
    import 'package:dio/dio.dart';
    //轮播图类模型：
    import '../../model/FocusModel.dart';
    
    class HomePage extends StatefulWidget {
      HomePage({Key key}) : super(key: key);
    
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage>
        with AutomaticKeepAliveClientMixin {
      //轮播图：
      //flutter run -d all 链接多个设备的命令：
      List _focusData = [];
      List _hotProductList = [];
      List _bestProductList = [];
      @override
      // TODO: implement wantKeepAlive
      bool get wantKeepAlive => true;
      void initState() {
        super.initState();
        _getFocusData();
        _getHotProductData();
        _getBestProductData();
    
        SearchServices.setHistoryData('aaa');
      }
    
      //获取轮播图数据：
      _getFocusData() async {
        var api = '${Config.domain}api/focus';
        var result = await Dio().get(api);
        var focusList = FocusModel.fromJson(result.data);
        focusList.result.forEach((value) {
          print(value.title);
          print(value.pic);
        });
        setState(() {
          this._focusData = focusList.result;
        });
      }
    
      //获取猜你喜欢的数据：
      _getHotProductData() async {
        var api = '${Config.domain}api/plist?is_hot=1';
        var result = await Dio().get(api);
        var hotProductList = ProductModel.fromJson(result.data);
        setState(() {
          this._hotProductList = hotProductList.result;
        });
      }
    
      //获取热门推荐的数据：
      _getBestProductData() async {
        var api = '${Config.domain}api/plist?is_best=1';
        var result = await Dio().get(api);
        var bestProductList = ProductModel.fromJson(result.data);
        setState(() {
          this._bestProductList = bestProductList.result;
        });
      }
    
      Widget _swiperWidget() {
        // List<Map> imgList = [
        //   {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
        //   {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
        //   {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
        // ];
        if (this._focusData.length > 0) {
          return Container(
            child: AspectRatio(
              aspectRatio: 2 / 1,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  String pic = this._focusData[index].pic;
                  pic = Config.domain + pic.replaceAll('\\', '/');
                  return new Image.network(
                    "${pic}",
                    fit: BoxFit.fill,
                  );
                },
                itemCount: this._focusData.length,
                pagination: new SwiperPagination(),
                control: new SwiperControl(),
                autoplay: true,
              ),
            ),
          );
        } else {
          return Text('加载中~');
        }
      }
    
      //标题：
      Widget _titleWidget(value) {
        return Container(
          height: ScreenAdaper.height(46),
          margin: EdgeInsets.only(left: ScreenAdaper.width(20)),
          padding: EdgeInsets.only(left: ScreenAdaper.width(20)),
          decoration: BoxDecoration(
              border: Border(
                  left: BorderSide(
                      color: Colors.red, width: ScreenAdaper.width(10)))),
          child: Text(value, style: TextStyle(color: Colors.black54)),
        );
      }
    
      //热门商品：
      Widget _hotProductListWidget() {
        if (this._hotProductList.length > 0) {
          return Container(
            height: ScreenAdaper.height(240),
            padding: EdgeInsets.all(ScreenAdaper.width(20)),
            // width: double.infinity, //寬度自適應
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (contxt, index) {
                String sPic = this._hotProductList[index].sPic;
                sPic = Config.domain + sPic.replaceAll('\\', '/');
                return Column(
                  children: <Widget>[
                    Container(
                      height: ScreenAdaper.height(140),
                      width: ScreenAdaper.width(140),
                      margin: EdgeInsets.only(right: ScreenAdaper.width(21)),
                      child: Image.network("${sPic}", fit: BoxFit.cover),
                    ),
                    Container(
                      padding: EdgeInsets.only(top: ScreenAdaper.height(10)),
                      height: ScreenAdaper.height(44),
                      child: Text(
                        "￥${this._hotProductList[index].price}",
                        style: TextStyle(color: Colors.red),
                      ),
                    )
                  ],
                );
              },
              itemCount: this._hotProductList.length,
            ),
          );
        } else {
          return Text('暂无热门推荐数据');
        }
      }
    
      Widget _recProductListWidget() {
        var itemWidth = (ScreenAdaper.getScreenWidth() - 30) / 2;
        return Container(
          padding: EdgeInsets.all(10),
          child: Wrap(
            runSpacing: 10,
            spacing: 10,
            children: this._bestProductList.map((value) {
              //图片：
              var sPic = value.sPic;
              sPic = Config.domain + sPic.replaceAll('\\', '/');
    
              return InkWell(
                onTap: (){
                  Navigator.pushNamed(context, '/productContent',arguments: {
                    "id":value.sId
                  });
                },
                child: Container(
                  padding: EdgeInsets.all(ScreenAdaper.width(20)),
                  width: itemWidth,
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black12, width: 1)),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: double.infinity,
                        child: AspectRatio(
                          aspectRatio: 1 / 1,
                          child: Image.network("${sPic}", fit: BoxFit.cover),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: ScreenAdaper.height(10)),
                        child: Text(
                          "${value.title}",
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(color: Colors.black54),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: ScreenAdaper.height(20)),
                        child: Stack(
                          children: <Widget>[
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                "${value.price}",
                                style: TextStyle(color: Colors.red, fontSize: 16),
                              ),
                            ),
                            Align(
                              alignment: Alignment.centerRight,
                              child: Text(
                                "￥${value.oldPrice}",
                                style: TextStyle(
                                    color: Colors.black54,
                                    fontSize: 16,
                                    decoration: TextDecoration.lineThrough),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              );
            }).toList(),
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        ScreenAdaper.init(context);
        return ListView(
          children: <Widget>[
            _swiperWidget(),
            SizedBox(height: ScreenAdaper.height(20)),
            _titleWidget("猜你喜欢"),
            _hotProductListWidget(),
            SizedBox(height: ScreenAdaper.height(20)),
            _titleWidget("热门推荐"),
            _recProductListWidget()
          ],
        );
      }
    }

router.dart

import 'package:flutter/material.dart';
    import '../pages/tabs/Tabs.dart';
    import '../pages/Search.dart';
    import '../pages/ProductList.dart';
    import '../pages/ProductContent.dart';
    //配置路由的地方：
    final routes = {
      '/': (context) => Tabs(),
      '/search': (context) => SearchPage(),
      '/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
      '/productContent': (context,{arguments}) => ProductContentPage(arguments:arguments)
    };
    //固定写法：
    var onGenerateRoute = (RouteSettings settings) {
      // 统一处理
      final String name = settings.name;
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        } else {
          final Route route =
              MaterialPageRoute(builder: (context) => pageContentBuilder(context));
          return route;
        }
      }
    };

转载于:https://www.cnblogs.com/yiweiyihang/p/11456409.html

[1057166-20190903231543332-478389234.png]: https://img2018.cnblogs.com/blog/1057166/201909/1057166-20190903231543332-478389234.png
[1057166-20190903231622257-805404570.png]: /images/20230810/848309b3dec444548cc4917941d270f5.png