Flutter實現底部導航欄效果

2019-12-12 00:33:58

字體：大中小

來源：轉載

供稿：網友

大家最近都在討論新鮮技術-flutter，小編也在學習中，遇到大家都遇到的問題，底部導航。下面給大家貼出底部導航的編寫，主要參考了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;  }); }}

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

底部導航欄的內容填充

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

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個頁面的代碼是一樣的，具體邏輯由需求去填寫

三.效果圖

效果圖