Flutter仿京东商城APP底部导航实现

01 基础代码

main.dart

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'jdshop',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: '京东商城'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: const Text("我是首页"),);}
}

02 配置底部导航

核心代码

bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
])

完整代码

main.dart

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'jdshop',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: '京东商城'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: const Text("我是首页"),bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),]),);}
}

03 抽离底部导航代码

main.dart

import 'package:flutter/material.dart';
import 'pages/tabs/tabs.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'jdshop',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const Tabs(title: "京东商城"),);}
}

pages/tabs/tabs.dart

import 'package:flutter/material.dart';class Tabs extends StatefulWidget {const Tabs({super.key, required this.title});final String title; // 标题@overrideTabsState createState() => TabsState();
}class TabsState extends State<Tabs> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: const Text("我是首页"),bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),]),);}
}

04 增加底部导航选项

核心代码

1.添加索引

int _currentIndex = 0;

2.配置底部导航

bottomNavigationBar: BottomNavigationBar(currentIndex: _currentIndex,onTap: (index) {setState(() {_currentIndex = index;});},type: BottomNavigationBarType.fixed, // 超过2个必须配置这个才显示items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: "购物车"),BottomNavigationBarItem(icon: Icon(Icons.people), label: "我的"),]),
);

完整代码

pages/tabs/tabs.dart

import 'package:flutter/material.dart';class Tabs extends StatefulWidget {const Tabs({super.key, required this.title});final String title; // 标题@override_TabsState createState() => _TabsState();
}class _TabsState extends State<Tabs> {int _currentIndex = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: const Text("我是首页"),bottomNavigationBar: BottomNavigationBar(currentIndex: _currentIndex,onTap: (index) {setState(() {_currentIndex = index;});},type: BottomNavigationBarType.fixed, // 超过2个必须配置这个才显示items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: "购物车"),BottomNavigationBarItem(icon: Icon(Icons.people), label: "我的"),]),);}
}