爱刨根知识网

  1. 首页 > 经验知识 > >

Flutter自定义底部导航栏的方法

生活经验知识分享

本文实例为大家分享了flutter自定义底部导航栏的具体代码，供大家参考，具体内容如下
文件结构：
main.dart
import 'package:flutter/material.dart';import 'pages/tabs.dart'; void main() => runapp(new myapp()); class myapp extends statelesswidget {  @override  widget build(buildcontext context) {    return materialapp(      home: tabs(),    );  }}【Flutter自定义底部导航栏的方法】tabs.dart
import 'package:flutter/material.dart';import 'tabs/home.dart';import 'tabs/category.dart';import 'tabs/user.dart';class tabs extends statefulwidget {  tabs({key key}) : super(key: key);  @override  _tabsstate createstate() => _tabsstate();} class _tabsstate extends state<tabs> {  int _currentindex = 0;   list _pagelist=[    homepage(),    categorypage(),    userpage(),  ];    @override  widget build(buildcontext context) {    return scaffold(      appbar: appbar(        title: text('自定义底部导航'),      ),      body: this._pagelist[this._currentindex],      bottomnavigationbar: bottomnavigationbar(        currentindex: this._currentindex,        ontap: (int index) {          setstate(() {            this._currentindex = index;          });        },        items: [          bottomnavigationbaritem(            icon: icon(icons.home),            title: text('首页'),          ),          bottomnavigationbaritem(            icon: icon(icons.category),            title: text('分类'),          ),          bottomnavigationbaritem(            icon: icon(icons.supervised_user_circle),            title: text('会员'),          ),        ],      ),    );  }}home.dart
import 'package:flutter/material.dart'; class homepage extends statefulwidget {  homepage({key key}) : super(key: key);   @override  _homepagestate createstate() => _homepagestate();} class _homepagestate extends state<homepage> {  @override  widget build(buildcontext context) {    return text('首页');  }}category.dart
import 'package:flutter/material.dart'; class categorypage extends statefulwidget {  categorypage({key key}) : super(key: key);   @override  _categorypagestate createstate() => _categorypagestate();} class _categorypagestate extends state<categorypage> {  @override  widget build(buildcontext context) {    return text('分类');  }}user.dart
import 'package:flutter/material.dart'; class userpage extends statefulwidget {  userpage({key key}) : super(key: key);   @override  _userpagestate createstate() => _userpagestate();} class _userpagestate extends state<userpage> {  @override  widget build(buildcontext context) {    return text('会员');  }}效果展示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com 。
-- 展开阅读全文 --

    推荐阅读


    上一篇：Android简单实现动态权限获取相机权限及存储空间等多权限

    下一篇：Android组件化原理详细介绍