Flutter-仿京東項(xiàng)目總結(jié)

1、tab與路由配置

在routers/router.dart中, 配置路由:

import 'dart:js';

import 'package:flutter/material.dart';
import 'package:newsmth/pages/test/tabs/tabs.dart';

// 配置路由
final routes = {
  '/': (context) => const Tabs(),
  '/search': (context) => const SearchPage(),
};

//固定寫法
var onGenerateRoute = (RouteSettings settings) {
  //統(tǒng)一處理
  final String? name = settings.name;
  final Function pageContentBuilder = routes[name] as Function;
  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;
    }
  }
};

在tabs/tabs.dart中, 設(shè)置tab:

import 'package:flutter/material.dart';
import 'package:newsmth/pages/favorite/index.dart';
import 'package:newsmth/pages/home/index.dart';
import 'package:newsmth/pages/message/index.dart';
import 'package:newsmth/pages/my/index.dart';

class Tabs extends StatefulWidget {
  const Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List _pageList = [
    const HomeView(),
    const FavoriteView(),
    const MessageView(),
    const MyView(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("jdshop"),
      ),
      body: _pageList[_currentIndex], //tab對(duì)應(yīng)頁(yè)面
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => {
          setState(() {
            _currentIndex = index;
          })
        },
        type: BottomNavigationBarType.fixed, //此配置可以實(shí)現(xiàn)展示多個(gè)tab
        fixedColor: Colors.red,//tab選中顏色
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首頁(yè)",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: "分類",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart_outlined),
            label: "購(gòu)物車",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: "我的",
          )
        ],
      ),
    );
  }
}

在main.dart中使用Tab和路由配置:

import 'routers/router.dart';
...
class _myAppState extends State<MyApp>{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      initialRoute: '/', //初始路由
        onGenerateRoute: onGenerateRoute
    )
  }
}

在homeView.dart中, 測(cè)試路由跳轉(zhuǎn):

RaisedButton(
    child: Text("跳轉(zhuǎn)到搜索"),
  onPressed:(){
    Navigator.pushName(context, '/search');
  }
)

2、首頁(yè)布局

使用插件flutter_swiper, 來(lái)實(shí)現(xiàn)輪播圖

dependencies:
    flutter_swiper: ^1.16 # 輪播圖
  flutter_screenutil: ^5.0.3 # 屏幕適配

在home.dart 中, 使用

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class CartPage extends StatefulWidget {
  const CartPage({Key? key}) : super(key: key);

  @override
  _CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  //輪播圖
  Widget _swiperWidget() {
    List<Map> imgList = [
      {"url": "https://www.ityiing.com/images/flutter/slide01.jpg"},
      {"url": "https://www.ityiing.com/images/flutter/slide02.jpg"},
      {"url": "https://www.ityiing.com/images/flutter/slide03.jpg"},
    ];
    return Container(
      child: AspectRatio(
        aspectRatio: 2 / 1, //設(shè)置寬高比
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Image.network(
              imgList[index]["url"],
              fit: BoxFit.fill,
            );
          },
          itemCount: imgList.length,
          pagination: const SwiperPagination(),
          control: const SwiperControl(),
          autoplay: true, //自動(dòng)輪播
        ),
      ),
    );
  }

  Widget _titleWidget(value) {
    return Container(
      height: 34.h,
      margin:  EdgeInsets.only(left: 10.w),
      padding: EdgeInsets.only(left: 10.w),
      //設(shè)置左側(cè)邊框
      decoration:  BoxDecoration(
        border: Border(
          left: BorderSide(
            color: Colors.red,
            width: 10.w,
          ),
        ),
      ),
      child: Text(
        value,
        style: const TextStyle(
          color: Colors.black54,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _swiperWidget(),
        _titleWidget("猜你喜歡"),
        SizedBox(height: 10.sp),
        _titleWidget("熱門推薦"),
        SizedBox(height: 10.sp),
      ],
    );
  }
}

3、封裝適配庫(kù)以實(shí)現(xiàn)左右滑動(dòng)Listview

首頁(yè)-熱門商品

//熱門商品
  Widget _hotProductList() {
    return Container(
      height: 240.h,
      // width: double.infinity, //要占用整個(gè)寬度或高度
      padding: EdgeInsets.all(20.w),
      child: ListView.builder(
        scrollDirection: Axis.horizontal, //水平滾動(dòng)
        itemBuilder: (context, index) {
          return Column(
            children: [
              Container(
                height: 140.h,
                width: 140.w,
                margin: EdgeInsets.only(right: 21.w),
                child: Image.network(
                  "https://www.itying.com/images/flutter/hot${index + 1}.jpg",
                  fit: BoxFit.cover, //圖片適配容器寬高
                ),
              ),
              Container(
                padding: EdgeInsets.only(top: 10.h),
                child: Text("第$index條"),
                height: 44.h,
              )
            ],
          );
        },
        itemCount: 80,
      ),
    );
  }

4、網(wǎng)格布局

首頁(yè)商品列表

    //推薦商品
  Widget _recProductItemWidget() {
    var itemWidth = (1.sw - 30) / 2;
    //沒(méi)設(shè)置高度, 高度會(huì)自適應(yīng)
    return Container(
      padding: const EdgeInsets.all(5),
      width: itemWidth,
      decoration: BoxDecoration(
          //邊框
          border: Border.all(
        color: Colors.black12,
        width: 1,
      )),
      child: Column(
        children: [
          SizedBox(
            width: double.infinity,
            child: AspectRatio(
              aspectRatio: 1/1,//防止服務(wù)器返回圖片寬度不一致,導(dǎo)致高度不一致
              child: Image.network(
                "https://www.itying.com/images/flutter/list1.jpg",
                fit: BoxFit.cover, //圖片適配容器寬高
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 10.h),
            child: const Text(
              "2019夏季新款",
              maxLines: 2,
              overflow: TextOverflow.ellipsis, //超出限制...
              style: TextStyle(color: Colors.black54),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20.h),
            //左右布局
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "￥188.0",
                    style: TextStyle(color: Colors.red, fontSize: 16.sp),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "￥198.0",
                    style: TextStyle(
                        color: Colors.black54,
                        fontSize: 14.sp,
                        decoration: TextDecoration.lineThrough),//配置一個(gè)下劃線
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

    Widget _recProductListWidget() {
    return Container(
      padding: EdgeInsets.all(10),
      child: Wrap(
        runSpacing: 10, //主軸間距
        spacing: 10, //副軸間距
        children: [
          _recProductItemWidget(),
        ],
      ),
    );
  }

5、JSON轉(zhuǎn)對(duì)象

一、在線方式

1、JSON to Dart
2、quicktype (推薦)

二、插件工具 (推薦)

1、FlutterJsonBeanFactory
2、json_serializable 和 build_runner

7、商品分類頁(yè)面布局--左右菜單

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

class Category extends StatefulWidget {
  Category({Key? key}) : super(key: key);

  @override
  State<Category> createState() => _CategoryState();
}

class _CategoryState extends State<Category> {
  @override
  Widget build(BuildContext context) {
    var _selectedIndex = 0;

    //計(jì)算左側(cè)寬度
    var leftWidth = 1.sw / 4;
    //右側(cè)每一項(xiàng)寬度=(總寬度-左測(cè)寬度-GridView外側(cè)原生左右的Padding值-GridView中間的間距)/3
    var rightItemWidth = (1.sw - leftWidth - 20 - 20) / 3;
    rightItemWidth = rightItemWidth.w;
    var rightItemHeight = rightItemWidth + 28.h;

    return Row(children: [
      //左側(cè)視圖
      Container(
        width: leftWidth,
        height: double.infinity,
        color: Colors.red,
        child: ListView.builder(
          itemCount: 18,
          itemBuilder: (context, index) {
            return Column(
              children: [
                // InkWell當(dāng)做"按鈕"組件用
                InkWell(
                  onTap: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  child: Container(
                    width: double.infinity,
                    height: 84.h,
                    padding: EdgeInsets.only(top: 24.h),
                    child: Text("第$index條", textAlign: TextAlign.center),
                    color: _selectedIndex == index ? Colors.red : Colors.white,
                  ),
                ),
                const Divider(height: 1) //如果不設(shè)置高度, 默認(rèn)高度是16
              ],
            );
          },
        ),
      ),
      //右側(cè)視圖
      Expanded(
        flex: 1,
        child: Container(
          padding: EdgeInsets.all(10.h),
          height: double.infinity,
          color: const Color.fromRGBO(240, 240, 240, 0.9),
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, //每行數(shù)量
              childAspectRatio: rightItemWidth / rightItemHeight, //寬高比
              crossAxisSpacing: 10, //縱軸間距
              mainAxisSpacing: 10, //主軸間距
            ),
            itemBuilder: (context, index) {
              return Container(
                child: Column(
                  children: [
                    AspectRatio(
                      aspectRatio: 1 / 1,
                      child: Image.network(
                        "https://www.itying.com/images/flutter/list1.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                    Container(
                      height: 28.h,
                      child:  Text("女裝"),
                    )
                  ],
                ),
              );
            },
            itemCount: 18,
          ),
        ),
      ),
    ]);
  }
}

9、底部Tab切換保持頁(yè)面狀態(tài)

①IndexedStack 保持頁(yè)面狀態(tài)

IndexedStack 和 Stack 一樣，都是層布局控件， 可以在一個(gè)控件上面放置另一 個(gè)控件，但唯一不同的是 IndexedStack 在同一時(shí)刻只能顯示子控件中的一個(gè)控 件，通過(guò) Index 屬性來(lái)設(shè)置顯示的控件。

IndexedStack 來(lái)保持頁(yè)面狀態(tài)的優(yōu)點(diǎn)就是配置簡(jiǎn)單。IndexedStack 保持頁(yè)面狀 態(tài)的缺點(diǎn)就是不方便單獨(dú)控制每個(gè)頁(yè)面的狀態(tài)。

IndexedStack 用法:

Container(
  width: double.infinity,
  height: double.infinity,
  child: new IndexedStack(
    index: 0,
    alignment: Alignment.center,
    children: <Widget>[
      Image.network(
        "https://www.itying.com/images/flutter/list1.jpg",
        fit: BoxFit.cover,
      ),
      Image.network("https://www.itying.com/images/flutter/list2.jpg",
          fit: BoxFit.cover)
    ],
  ),
);

注: IndexedStack會(huì)一次性加載所有頁(yè)面, 不方便控制所有頁(yè)面狀態(tài)

②AutomaticKeepAliveClientMixin 保持頁(yè)面狀態(tài) ?

AutomaticKeepAliveClientMixin 結(jié)合 tab 切換保持頁(yè)面狀態(tài)相比 IndexedStack 而言配置起來(lái)稍 微有些復(fù)雜。它結(jié)合底部 BottomNavigationBar 保持頁(yè)面狀態(tài)的時(shí)候需要進(jìn)行如下配置。

import 'package:flutter/material.dart';
import 'package:newsmth/pages/favorite/index.dart';
import 'package:newsmth/pages/home/index.dart';
import 'package:newsmth/pages/message/index.dart';
import 'package:newsmth/pages/my/index.dart';

class Tabs extends StatefulWidget {
  const Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  //sp1.初始化PageController
  late PageController _pageController;
  int _currentIndex = 0;
  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _currentIndex);
  }

  final List<Widget> _pageList = [
    const HomeView(),
    const FavoriteView(),
    const MessageView(),
    const MyView(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("jdshop"),
      ),
      body: PageView(//sp2.設(shè)置tab對(duì)應(yīng)頁(yè)面
        controller: _pageController,
        children: _pageList,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => {
          setState(() {
            _currentIndex = index;
            _pageController.jumpToPage(index);//sp3.設(shè)置頁(yè)面切換
          })
        },
        type: BottomNavigationBarType.fixed, //此配置可以實(shí)現(xiàn)展示多個(gè)tab
        fixedColor: Colors.red, //選中顏色
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首頁(yè)",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: "分類",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart_outlined),
            label: "購(gòu)物車",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: "我的",
          )
        ],
      ),
    );
  }
}

需要持久化的頁(yè)面加入如下代碼:

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin { //sp5.繼承AutomaticKeepAliveClientMixin 來(lái)保持狀態(tài)
  @override
  bool get wantKeepAlive => true;//sp6. 返回true
}

10、商品列表布局

注意:如果Container里面加上decoration屬性, 這個(gè)時(shí)候color屬性必須放在BoxDecoration里面

class _ProductListPageState extends State<ProductListPage> {
  Widget _productListWidget() {
    return Container(
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.only(top: 80.h),
      child: ListView.builder(
        itemBuilder: (context, index) {
          //每一個(gè)元素
          return Column(
            children: [
              //左邊圖片
              Container(
                width: 180.w,
                height: 180.h,
                child: Image.network("圖片地址"),
              ),
              //右側(cè)內(nèi)容
              Expanded(
                  flex: 1,
                  child: Container(
                    height: 180.h, //此時(shí)要設(shè)置高度, 否則子組件內(nèi)容無(wú)法撐滿容器
                    margin: EdgeInsets.only(left: 10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [],
                    ),
                  ))
            ],
          );
        },
        itemCount: 10,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("商品列表"),
        ),
        body: _productListWidget()
    );
  }
}

11、商品列表頁(yè)面二級(jí)篩選導(dǎo)航布局

自定義Tab導(dǎo)航:

  Widget _subHeaderWidget() {
    return Positioned(
      top: 0,
      height: 80.h,
      width: 750.w,
      child: Container(
        height: 80.h,
        width: 750.w,
        color: Colors.red,
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                  child: Text("綜合", textAlign: TextAlign.center),
                ),
                onTap: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                  child: Text("價(jià)格", textAlign: TextAlign.center),
                ),
                onTap: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                  child: Text("篩選", textAlign: TextAlign.center),
                ),
                onTap: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Stack(
        children: [
          _productListWidget(),
          _subHeaderWidget(),
        ],
      ),
    );
  }

實(shí)現(xiàn)篩選功能--側(cè)邊欄彈框:

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();   //sp1
@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,//sp2
      appBar: AppBar(
        title: Text("商品列表"),
        actions: [
          Text("")//sp4.去掉導(dǎo)航欄默認(rèn)添加的調(diào)出側(cè)邊欄按鈕
        ],
      ),
      endDrawer: Drawer(//sp3.側(cè)邊欄彈框
        child: Container(
          child: Text("側(cè)邊欄彈框內(nèi)容布局"),
        ),
      ),
      body: Stack(
        children: [
          _productListWidget(),
          _subHeaderWidget(),
        ],
      ),
    );
  }

通過(guò)事件打開側(cè)邊欄

InkWell(
  onTap: () {
  //注意:新版本的 Flutter 中 ScaffoldState? 為可空類型 注意判斷 
  if(_scaffoldKey.currentState!=null){
    _scaffoldKey.currentState!.openEndDrawer();
  },
  child: Text("篩選", textAlign: TextAlign.center),
),

12、上拉刷新監(jiān)聽

class _ProductListPageState extends State<ProductListPage> {
  Widget _productListWidget() {
    return Container(
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.only(top: 80.h),
      child: ListView.builder(
        controller: _scrollController, //sp1.
        ...
   }
        
        
   final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  //sp2.用于上拉分頁(yè)
  ScrollController _scrollController = ScrollController(); //listview的控制器
  //分頁(yè)
  int _page = 1;
  //數(shù)據(jù)
  List _productList = [];
  //排序
  String _sort = "";
  //解決重復(fù)請(qǐng)求的問(wèn)題
  bool flag = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _scrollController.addListener(() {//sp3.監(jiān)聽滾動(dòng)
      //_scrollController.position.pixels //獲取滾動(dòng)條滾動(dòng)高度
      //_scrollController.position.maxScrollExtent //獲取頁(yè)面高度
      if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 20) {
        if (flag) {
          _getProductListData();
        }
      }
    });
  }
}

注: _scrollController.jumpTo(0); //回到頂部

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容