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

 更新时间:2022年07月28日 15:15:14   作者:兰叶书  
这篇文章主要为大家详细介绍了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(),
    );
  }
}

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('会员');
  }
}

效果展示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android手机屏幕敲击解锁功能代码

    Android手机屏幕敲击解锁功能代码

    Android手机支持敲击屏幕解锁,敲击屏幕解锁是一项很实用的功能,本文以android平台为例使用java代码实现Android手机屏幕敲击解锁功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • Flutter实现抖音点赞效果

    Flutter实现抖音点赞效果

    抖音的点赞效果在第一次看到的时候,总有一种眼前一亮的感觉。一边看视频,还能在视频上点赞,而且整个屏幕都能够点赞,并伴随动画,还是很炫酷的。今天我们用Flutter来实现一下这个效果
    2021-05-05
  • Android 动态的显示时间

    Android 动态的显示时间

    本文给大家分享一段代码实现android动态显示时间,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • Android对so进行简单hook思路解析

    Android对so进行简单hook思路解析

    这篇文章主要为大家介绍了Android对so进行简单hook思路解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 基于Android实现一个常用的布局吸顶效果

    基于Android实现一个常用的布局吸顶效果

    这篇文章给大家介绍一个布局吸顶效果,一般出现在内容较长页面还嵌套着分类页面的情况,比如电商的详情页嵌套分类,在页面滑动到tab的时候我们希望tab还能保留在页面顶部而不被顶上去,文中有详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • 解决Android SurfaceView绘制触摸轨迹闪烁问题的方法

    解决Android SurfaceView绘制触摸轨迹闪烁问题的方法

    这篇文章主要为大家详细介绍了解决Android SurfaceView绘制触摸轨迹闪烁问题的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Android使用ImageView实现支持手势缩放效果

    Android使用ImageView实现支持手势缩放效果

    这篇文章主要介绍了Android使用ImageView实现支持手势缩放效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 基于Flutter制作一个心碎动画特效

    基于Flutter制作一个心碎动画特效

    这篇文章主要为大家介绍了如何利用Flutter制作一个心碎动画特效,文中的示例代码讲解详细,对我们学习Flutter有一定帮助,感兴趣的可以了解一下
    2022-04-04
  • Android GPS定位测试(附效果图和示例)

    Android GPS定位测试(附效果图和示例)

    本人做了GPS相关的嵌入式软件已经几年了,所以说起要做个测试GPS定位模块的程序,第一反应就是串口读取GPS模块的数据,然后解析GPS的NMEA格式数据
    2013-07-07
  • TextView长按复制的实现方法(总结)

    TextView长按复制的实现方法(总结)

    下面小编就为大家带来一篇TextView长按复制的实现方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论