Flutter BottomNavigationBar 自定义底部导航栏,实现页面切换

Flutter 专栏收录该内容
13 篇文章 0 订阅

Flutter BottomNavigationBar组件

BottomNavigationBar是底部导航条,可以让我们定义底部Tab切换,bottomNatigationBar是Scaffold组件的参数。

 

BottomNavigationBar常见属性

属性说明
itemsList<BottomNavigationBarItem> 底部导航条按钮集合
iconSizeicon
currentIndex默认选中第几个
onTap选中变化回调函数
        onTap: (int index){
          setState(() {
            print("Tagwjlis index = ${index}");
            this._currentIndex = index;
          });
        },
fixedColor选中的颜色
type

BottomNavigationBarType.fixed    //配置底部tabs可以有多个按钮

 

BottomNavigationBarType.shifting

 

实现一个页面切换功能目录

 

main.dart

import 'package:flutter/material.dart';
import 'package:stack_align_positioned/pages/Tabs.dart';
import 'reg/listData.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  int _curentIndex = 0;
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

Tabs.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stack_align_positioned/main.dart';
import 'package:stack_align_positioned/pages/tabs/CategoryPages.dart';
import 'package:stack_align_positioned/pages/tabs/HomePage.dart';
import 'package:stack_align_positioned/pages/tabs/SettingsPages.dart';

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabsState();
  }
}

class _TabsState extends State<Tabs>{
  int _currentIndex = 0;
  List _listPageData = [  //页面的链表
    HomePages(),
    CategoryPages(),
    SettingsPages()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter BottomNavigationBar"),
      ),
      body: this._listPageData[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,//配置对应的索引值选中
        onTap: (int index){//index 表示选择选项
          setState(() {
            print("Tagwjlis index = ${index}");
            this._currentIndex = index;
          });
        },
        iconSize: 36.0,           //icon的大小
        fixedColor: Colors.red,   //选中颜色
        type: BottomNavigationBarType.fixed,//配置底部tabs可以有多个按钮
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text("分类")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("设置")
          )
        ],
      ),
    );
  }
}

 

HomePages.dart

import 'package:flutter/cupertino.dart';

class HomePages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }

}

class _HomeState extends State<HomePages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Home Text"),
    );
  }
}

CategoryPages.dart

import 'package:flutter/cupertino.dart';

class CategoryPages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategorysStae();
  }
}

class _CategorysStae extends State<CategoryPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("CategoryPages center"),
    );
  }
}

SettingsPages.dart

import 'package:flutter/cupertino.dart';

class SettingsPages extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return _SettingsStae();
  }
}

class _SettingsStae extends State<SettingsPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("SettingsPages center"),
    );
  }
}

 

  • 2
    点赞
  • 9
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值