脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → flutter底部导航栏切换

flutter实现底部导航栏切换

 更新时间：2022年07月28日 14:03:10   作者：派大星⭐  
这篇文章主要为大家详细介绍了flutter实现底部导航栏切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

思路：MaterialApp是提供了bottomnavigationbar的，可以使用，这个已经提供了的widget，再利用每次点击tab的时候使用set state方法来更新屏幕，切换中间的body的widget；
main文件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app1/MyBottomNavigationBar.dart';

void main(){
  runApp(new MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new MaterialApp(
      title:" MyNavigationBar",
      home: new MyBottomNavigationBar(),
    );
  }

}

MyBottomNavigationBar()：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app1/pages/AddScreen.dart';
import 'package:flutter_app1/pages/HomeScreen.dart';
import 'package:flutter_app1/pages/PersonScreen.dart';

class MyBottomNavigationBar extends StatefulWidget{
  @override
  MyNavigationBarState createState() {
    // TODO: implement createState
    // throw UnimplementedError();
    return new MyNavigationBarState();
  }

}
class MyNavigationBarState extends State<MyBottomNavigationBar>{
 List<Widget> pagesList=[];
 int cunrrentIndex=0;

 @override
  void initState() {
   pagesList=pagesList..add(new HomeScreen())
       ..add(new AddScreen())
       ..add(new PersonScreen());
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("MyNavigationBar"),
      ),
      body: pagesList[cunrrentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            label:"Home"
          ),
          new BottomNavigationBarItem(
              icon: new Icon(Icons.add),
              label:"Add"
          ),
          new BottomNavigationBarItem(
              icon: new Icon(Icons.person),
              label:"Person"
          )
        ],
        onTap:(index){
          setState(() {
            cunrrentIndex=index;
          });
        },
        currentIndex: cunrrentIndex,
      )
    );
  }

}

addScreen：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AddScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("AddPage"),
      ),
      body: new Center(
        child: new Text("Add"),
      ),
    );
  }

}

HomeScreen

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("HomePage"),
      ),
      body: new Center(
        child:Image.asset("images/cat.png"),
      ),
    );
  }

}

PersonScreen ：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PersonScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("PersonPage"),
      ),
      body: new Center(
        child: new Text("Person"),
      ),
    );
  }

}

最终效果：

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

您可能感兴趣的文章:

相关文章

  • 深入浅析Android Fragment(下篇)

    深入浅析Android Fragment(下篇)

    本篇文章给大家介绍如何管理Fragment回退栈，Fragment如何与Activity交互，Fragment与Activity交互的最佳实践，没有视图的Fragment的用处，使用Fragment创建对话框，如何与ActionBar，MenuItem集成，对Android Fragment感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • 利用HorizontalScrollView实现滑动页面时的缩放效果

    利用HorizontalScrollView实现滑动页面时的缩放效果

    这篇文章主要为大家详细介绍了利用HorizontalScrollView实现滑动页面时的缩放效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Android studio 广播的简单使用代码详解

    Android studio 广播的简单使用代码详解

    这篇文章主要介绍了Android studio 广播的简单使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • Android使用viewpager实现自动无限轮播图

    Android使用viewpager实现自动无限轮播图

    这篇文章主要介绍了Android使用viewpager实现自动无限轮播图效果，实现方法大概有两种，一种是viewpager+作为游标的点 。另外一种是重写viewpager，具体实现过程大家参考下本文
    2018-06-06
  • Android开发Compose框架使用开篇

    Android开发Compose框架使用开篇

    这篇文章主要为大家介绍了Android开发Compose框架使用开篇，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Android实现QQ的第三方登录和分享

    Android实现QQ的第三方登录和分享

    这篇文章主要为大家详细介绍了Android实现QQ的第三方登录和分享，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • android实现多线程下载文件（支持暂停、取消、断点续传）

    android实现多线程下载文件（支持暂停、取消、断点续传）

    本篇文章主要介绍了androids实现多线程下载文件，主要包括暂停、取消、断点续传等功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • Android实现多点触摸操作

    Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作，实现图片的放大、缩小和旋转等处理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Android模仿知乎的回答详情页的动画效果

    Android模仿知乎的回答详情页的动画效果

    这篇文章主要介绍了Android模仿“知乎”的回答详情页的动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Android 手写RecyclerView实现列表加载

    Android 手写RecyclerView实现列表加载

    这篇文章主要介绍了Android 手写RecyclerView实现列表加载，涉及到列表的需求，肯定第一时间想到RecyclerView，即便是自定义View，那么RecyclerView也会是首选，为什么会选择RecyclerView而不是ListView，主要就是RecyclerView的内存复用机制，这也是RecyclerView的核心 
    2022-08-08

最新评论