Flutter實現(xiàn)底部導(dǎo)航欄效果

2019-10-21 21:40:31

字體：大中小

供稿：網(wǎng)友

大家最近都在討論新鮮技術(shù)-flutter，小編也在學(xué)習(xí)中，遇到大家都遇到的問題，底部導(dǎo)航。下面給大家貼出底部導(dǎo)航的編寫，主要參考了lime這個項目。

上代碼

一.在main.dart文件中

定義APP的基本信息

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) {  return new MaterialApp(   title: 'Flutter Demo',   theme: new ThemeData(    primarySwatch: themeColor(),   ),   home: new MyHomePage(title: 'Flutter Demo Home Page'),  ); }}

其中主要代碼部分

class _MyHomePageState extends State<MyHomePage> { PageController pageController; int page = 0; @override Widget build(BuildContext context) {  return new Scaffold(   backgroundColor: Colors.grey,   body: new PageView(     children: [      new Index(),      new Classify(),      new Shopping(),      new Myself()     ],     controller: pageController,     onPageChanged: onPageChanged   ),   bottomNavigationBar: new BottomNavigationBar(items: [    new BottomNavigationBarItem(     icon: new Icon(Icons.laptop_chromebook),     title: new Text("主頁"),     backgroundColor: Colors.grey    ),    new BottomNavigationBarItem(      icon: new Icon(Icons.list), title: new Text("分類"),backgroundColor: Colors.grey),    new BottomNavigationBarItem(      icon: new Icon(Icons.local_grocery_store), title: new Text("購物車")),    new BottomNavigationBarItem(icon: new Icon(Icons.person), title: new Text("我的"))   ],     onTap: onTap,     currentIndex: page   ),  ); } @override void initState() {  super.initState();  pageController = new PageController(initialPage: this.page); } void onTap(int index) {  pageController.animateToPage(    index, duration: const Duration(milliseconds: 300),    curve: Curves.ease); } void onPageChanged(int page) {  setState(() {   this.page = page;  }); }}

其中，各個頁面的主要聲明

Flutter,導(dǎo)航欄

底部導(dǎo)航欄的內(nèi)容填充

Flutter,導(dǎo)航欄

二.其他四個頁面的主要代碼

import 'package:flutter/material.dart';class Classify extends StatelessWidget { @override Widget build(BuildContext context) {  // TODO: implement build  return new Scaffold(   body: new Center(    child:    new Text("分類"),   ),  ); }}

其他3個頁面的代碼是一樣的，具體邏輯由需求去填寫

三.效果圖

Flutter,導(dǎo)航欄