当前位置： 移动技术网 > 移动技术>移动开发>Android > Flutter实现底部导航

Flutter实现底部导航

2019年07月29日  | 移动技术网移动技术  | 我要评论

本文实例为大家分享了flutter实现底部导航的具体代码，供大家参考，具体内容如下

bottomnavigationbar使用

底部导航栏 主文件 main.dart (注意导入文件路径)

import 'package:flutter/material.dart';
import './views/firstpage.dart';
import './views/secondpage.dart';
import './views/thirdpage.dart';
//首先导入三个界面

void main() {
 runapp(new myapp());
}

class myapp extends statefulwidget {
 @override
 _myhomepagestate createstate() => new _myhomepagestate();
}

class _myhomepagestate extends state<myapp> with tickerproviderstatemixin{

 int _tabindex = 0;

 list<bottomnavigationbaritem> _navigationviews;

 var appbartitles = ['首页', '发现', '我的'];

 pagecontroller pagecontroller;

 var _body;

 initdata() {
  _body = new indexedstack(
   children: <widget>[new firstpage(), new secondpage(), new thirdpage()],
   index: _tabindex,
  );
 }

 @override
 void initstate() {
  super.initstate();
  _navigationviews = <bottomnavigationbaritem>[
   new bottomnavigationbaritem(
    icon: const icon(icons.home),
    title: new text(appbartitles[0]),
    backgroundcolor: colors.blue,
   ),
   new bottomnavigationbaritem(
    icon: const icon(icons.widgets),
    title: new text(appbartitles[1]),
    backgroundcolor: colors.blue,
   ),
   new bottomnavigationbaritem(
    icon: const icon(icons.person),
    title: new text(appbartitles[2]),
    backgroundcolor: colors.blue,
   ),
  ];
 }

 final navigatorkey = globalkey<navigatorstate>();
 @override
 widget build(buildcontext context) {

  initdata();

  return new materialapp(
   navigatorkey: navigatorkey,
   theme: new themedata(
     primarycolor: colors.blue,
     accentcolor: colors.blue
   ),
   home: new scaffold(
    appbar: new appbar(
     title: new text(
      appbartitles[_tabindex],
      style: new textstyle(color: colors.white),
     ),
    ),
    body: _body,
    bottomnavigationbar: new bottomnavigationbar(
     items: _navigationviews
       .map((bottomnavigationbaritem navigationview) => navigationview)
       .tolist(),
     currentindex: _tabindex,
     type: bottomnavigationbartype.fixed,
     ontap: (index) {
      setstate(() {
       _tabindex = index;
      });
     },
    ),
   ),
  );
 }
}

底部包含三个导航按钮，分别对应三个界面:

firstpage.dart

import 'package:flutter/material.dart';

class firstpage extends statefulwidget {
 @override
 state<statefulwidget> createstate() => new firstpagestate();

}

class firstpagestate extends state<firstpage> {
 @override
 widget build(buildcontext context) {
  return new scaffold(
   body: new center(
    child: new text('这是第一个界面'),
   ),
  );
 }

}

secondpage.dart

import 'package:flutter/material.dart';

class secondpage extends statefulwidget {
 @override
 state<statefulwidget> createstate() => secondpagestate();

}

class secondpagestate extends state<secondpage> {
 @override
 widget build(buildcontext context) {
  return new scaffold(
   body: new center(
    child: new text("这是我第二个页面"),
   ),
  );
 }
}

thirdpage.dart

import 'package:flutter/material.dart';

class thirdpage extends statefulwidget {
 @override
 state<statefulwidget> createstate() => thirdpagestate();

}

class thirdpagestate extends state<thirdpage>{
 @override
 widget build(buildcontext context) {
  return new scaffold(
   body: new center(
    child: new text('我是界面三'),
   ),
  );
 }
}

运行截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网