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"),
      ),
    );
  }

}

最终效果:

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

(0)

相关推荐

  • Flutter实现底部导航栏效果

    大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航.下面给大家贴出底部导航的编写,主要参考了lime这个项目. 上代码 一.在main.dart文件中 定义APP的基本信息 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new

  • Flutter实现底部导航栏创建详解

    目录 添加依赖项 如何使用 功能 属性 主题 预览图 代码 Flutter web问题:Failed to load network image 我的解决办法 参考资料 ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,支持多种内置样式与动画交互.你可以在https://appbar.codemagic.app/上找到在线样例. 添加依赖项 在你的项目中去 pubspec.添加依赖项: 添加https://pub.dev/packages/convex_bottom_

  • Flutter实现底部和顶部导航栏

    Flutter底部和顶部导航栏的实现,供大家参考,具体内容如下 带文字图标的底部导航栏(使用BottomNavigationBar和BottomNavigationBarItem)来实现效果 (可以实现图片很文字,可以监听点击改变图片和文字的颜色) /* * BottomNavigationBarItem的一些属性           * const BottomNavigationBarItem({           * 图标           @required this.icon,  

  • Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果

    如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态

  • flutter BottomAppBar实现不规则底部导航栏

    本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 /** * 有状态StatefulWidget * 继承于 StatefulWidget,通过 State 的 build 方法去构建控件 */

  • Flutter底部导航栏的实现方式

    本文实例为大家分享了Flutter底部导航栏的实现代码,供大家参考,具体内容如下 老规格,先看图: 程序主结构如下: 1.在程序主入口文件main.dart添加如下代码 import 'package:flutter/material.dart'; import 'bottom_navigation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build

  • Flutter实现底部导航栏

    本文实例为大家分享了Flutter实现底部导航栏的具体代码,供大家参考,具体内容如下 效果 实现 先将自动生成的main.dart里面的代码删除, import 'package:flutter/material.dart'; import 'package:flutter_guohe/pages/main.dart'; void main() { runApp(new Guohe()); } 创建app.dart作为首页的页面文件 class Guohe extends StatefulWid

  • flutter实现底部导航栏切换

    本文实例为大家分享了flutter实现底部导航栏切换的具体代码,供大家参考,具体内容如下 思路:MaterialApp是提供了bottomnavigationbar的,可以使用,这个已经提供了的widget,再利用每次点击tab的时候使用set state方法来更新屏幕,切换中间的body的widget:main文件: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import '

  • 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 contex

  • android实现底部导航栏

    底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法比较好用,代码量也不多 首先是开始的activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

  • Android实现简单底部导航栏 Android仿微信滑动切换效果

    Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager; 3. 通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮; 代码实现: 1. 新建第一个自定义View, 图标 + 文字 的底部按钮; /** * 自定义控件

  • 微信小程序实战之仿android fragment可滑动底部导航栏(4)

    底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏. 相关教程:微信小程序教程系列之设置标题栏和导航栏(7) 但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动. 在业务上,有时候会比较限制,并不能完全满足所需. 又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢? 我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一. 因

随机推荐