01-02 Flutter仿京东商城项目功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目首页布局以及不同终端屏幕适配方案)...

绝地灬酷狼 2023-08-17 15:58 48阅读 0赞

***Flutter和Dart交流学习群：[交流群：452892873][452892873]***

01Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建

02Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案

![1057166-20190821230949097-2062237669.png][]基本架构：

Tabs.dart代码：

import 'package:flutter/material.dart';
    
    import 'Home.dart';
    import 'Cart.dart';
    import 'Category.dart';
    import 'User.dart';
    
    class Tabs extends StatefulWidget {
      Tabs({Key key}) : super(key: key);
    
      _TabsState createState() => _TabsState();
    }
    
    class _TabsState extends State<Tabs> {
      int _currentIndex=0;
      List _pageList=[
        HomePage(),
        CategoryPage(),
        CartPage(),
        UserPage()
      ];
      @override
      Widget build(BuildContext context) {
        return Container(
           child: Scaffold(
            appBar: AppBar(
              title: Text('jdshop'),
            ),
            
            body: this._pageList[this._currentIndex],
            bottomNavigationBar: BottomNavigationBar(
              currentIndex: this._currentIndex,
              onTap:(index){
                this.setState((){
                  this._currentIndex=index;
                });
              },
              type: BottomNavigationBarType.fixed,
              fixedColor: Colors.red,
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
                BottomNavigationBarItem(icon: Icon(Icons.category), title: Text('分类')),
                BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text('购物车')),
                BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的'))
              ],
            ),
          ),
        );
      }
    }

Cart.dart

import 'package:flutter/material.dart';
    class CartPage extends StatefulWidget {
      CartPage({Key key}) : super(key: key);
    
      _CartPageState createState() => _CartPageState();
    }
    
    class _CartPageState extends State<CartPage> {
      @override
      Widget build(BuildContext context) {
        return Text('我是购物车组件');
      }
    }

Category.dart

import 'package:flutter/material.dart';
    class CategoryPage extends StatefulWidget {
      CategoryPage({Key key}) : super(key: key);
    
      _CategoryPageState createState() => _CategoryPageState();
    }
    
    class _CategoryPageState extends State<CategoryPage> {
      @override
      Widget build(BuildContext context) {
        return Text('我是分类组件');
      }
    }

Home.dart

import 'package:flutter/material.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    
    class HomePage extends StatefulWidget {
      HomePage({Key key}) : super(key: key);
    
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      //轮播图：
      //flutter run -d all 链接多个设备的命令：
      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"}
        ];
    
        return Container(
          child: AspectRatio(
            aspectRatio: 2 / 1,
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return new Image.network(
                  imgList[index]['url'],
                  fit: BoxFit.fill,
                );
              },
              itemCount: imgList.length,
              pagination: new SwiperPagination(),
              control: new SwiperControl(),
              autoplay: true,
            ),
          ),
        );
      }
    
      //标题：
      Widget _titleWidget(value) {
        return Container(
          height: ScreenUtil.getInstance().setHeight(46),
          margin: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(20)),
          padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(20)),
          decoration: BoxDecoration(
              border: Border(
                  left: BorderSide(
                      color: Colors.red,
                      width: ScreenUtil.getInstance().setWidth(10)))),
          child: Text(value, style: TextStyle(color: Colors.black54)),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
        return ListView(
          children: <Widget>[
            _swiperWidget(),
            SizedBox(height: 10),
            _titleWidget("猜你喜欢"),
            SizedBox(height: 10),
            _titleWidget("热门推荐")
          ],
        );
      }
    }

User.dart

import 'package:flutter/material.dart';
    class UserPage extends StatefulWidget {
      UserPage({Key key}) : super(key: key);
    
      _UserPageState createState() => _UserPageState();
    }
    
    class _UserPageState extends State<UserPage> {
      @override
      Widget build(BuildContext context) {
        return Text('我是用户组件');
      }
    }

router.dart

import 'package:flutter/material.dart';
    import '../pages/tabs/Tabs.dart';
    import '../pages/Search.dart';
    //配置路由的地方：
    final routes = {
      '/': (context) => Tabs(),
      '/search': (context) => SearchPage(),
    };
    //固定写法：
    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;
        }
      }
    };

main.dart

import 'package:flutter/material.dart';
    import 'routes/router.dart';
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      MyApp({Key key}) : super(key: key);
    
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          // home:Tabs() ,
          initialRoute: '/',
          onGenerateRoute:onGenerateRoute
        );
      }
    }

pubspec.yaml新增：

flutter\_swiper: ^1.1.6

flutter\_screenutil: ^0.5.3

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

[452892873]: https://i.cnblogs.com/EditPosts.aspx?catid=1467262
[1057166-20190821230949097-2062237669.png]: /images/20230810/9711e126a1f048a187eae810ff057ab0.png