返回顶部
首页 > 资讯 > 移动开发 >Flutter自定义底部导航栏的方法
  • 298
分享到

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

2024-04-02 19:04:59 298人浏览 独家记忆
摘要

本文实例为大家分享了Flutter自定义底部导航栏的具体代码,供大家参考,具体内容如下 文件结构: main.dart import 'package:flutter/materi

本文实例为大家分享了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('会员');
  }
}

效果展示:

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

--结束END--

本文标题: Flutter自定义底部导航栏的方法

本文链接: https://lsjlt.com/news/165516.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter自定义底部导航栏的方法
    本文实例为大家分享了Flutter自定义底部导航栏的具体代码,供大家参考,具体内容如下 文件结构: main.dart import 'package:flutter/materi...
    99+
    2024-04-02
  • flutter实现底部导航栏
    本文实例为大家分享了flutter实现底部导航栏的具体代码,供大家参考,具体内容如下 一.flutter底部导航栏常用组件BottomNavigationBar 属性介绍 Botto...
    99+
    2024-04-02
  • Flutter定义tabbar底部导航路由跳转的方法
    本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下 效果展示 整体实现的目录结构 第一步 把三个页面放到tabs里 Categ...
    99+
    2024-04-02
  • Android design包自定义tablayout的底部导航栏的实现方法
    以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果. 实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图...
    99+
    2022-06-06
    方法 tablayout Android
  • Flutter实现底部和顶部导航栏
    Flutter底部和顶部导航栏的实现,供大家参考,具体内容如下 带文字图标的底部导航栏(使用BottomNavigationBar和BottomNavigationBarItem)来...
    99+
    2024-04-02
  • flutter实现底部导航栏切换
    本文实例为大家分享了flutter实现底部导航栏切换的具体代码,供大家参考,具体内容如下 思路:MaterialApp是提供了bottomnavigationbar的,可以使用,这个...
    99+
    2024-04-02
  • 微信小程序自定义底部导航栏组件
    本文实例为大家分享了微信小程序底部导航栏组件的具体实现代码,供大家参考,具体内容如下 1、在自己项目的公共组件的文件价下新建tabbar.vue(定义的自定义导航栏组件) <...
    99+
    2024-04-02
  • flutter实现底部不规则导航栏
    本文实例为大家分享了flutter实现底部不规则导航栏的具体代码,供大家参考,具体内容如下 scafford的bottomNavigationBar参数赋值BottomAppBar可...
    99+
    2024-04-02
  • Flutter如何实现底部导航栏创建
    Flutter如何实现底部导航栏创建,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,...
    99+
    2023-06-26
  • Flutter实现底部导航栏创建详解
    目录添加依赖项如何使用功能属性主题预览图代码Flutter web问题:Failed to load network image我的解决办法参考资料ConvexBottomBar是一...
    99+
    2024-04-02
  • CSS如何固定底部导航栏
    在css中将导航栏固定在页面底部的方法:1.创建导航栏;2.设置导航栏样式;3.使用position属性固定导航栏;在css中将导航栏固定在页面底部的方法首先,在页面中创建一个导航栏;<!DOCTYPE html>&l...
    99+
    2024-04-02
  • CSS怎么固定底部导航栏
    本文小编为大家详细介绍“CSS怎么固定底部导航栏”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS怎么固定底部导航栏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。首先,在页面中创建一个导航栏;<!DOC...
    99+
    2023-07-04
  • Android自定义水波纹底部导航的实现
    今天给大家带来一个自定义的底部导航,我不会做动图,只能搞一张图片给大家看看,大家见谅 这个就是自定义的tablayout底部搞好的样式了 TabLayout提供了一个水平布局用于展...
    99+
    2022-11-13
    Android 水波纹底部导航 Android 水波纹
  • JetPackCompose底部导航栏的实现方法详解
    目录1.声明导航栏数据源2.使用Scaffold搭建页面结构3.BottomNavigation的用法1.声明导航栏数据源 主要声明导航栏label和图标数组,这里使用的是本地数据,...
    99+
    2024-04-02
  • Android实现底部导航栏方法(Navigation篇)
    Navigation实现底部导航栏 前言导入和基本使用导入基础使用创建nav文件编辑Nav文件添加页面(代码版)添加页面(图解版) 创建导航动作 action创建action(代码版)...
    99+
    2023-10-10
    android
  • Android自定义字母导航栏
    本文实例为大家分享了Android字母导航栏的具体代码,供大家参考,具体内容如下 效果 实现逻辑 明确需求 字母导航栏在实际开发中还是比较多见的,城市选择、名称选择等等可能...
    99+
    2022-06-06
    字母 Android
  • Android怎么自定义底部栏
    要自定义Android底部栏,可以通过以下步骤来实现:1. 定义底部栏布局:在布局文件中定义一个线性布局或相对布局,将其放置在屏幕底...
    99+
    2023-10-11
    Android
  • Vue自定义部分页面显示导航栏功能
    目录遇到的问题:解决方法:遇到的问题: 最近在用Vue+elementUI开发一个网站的前端,网站的逻辑是没有账号的用户先注册,有账号的用户直接登录,登录后才能进入网站的主页。在设计...
    99+
    2024-04-02
  • SwiftUI自定义导航的方法实例
    目录前言切换标签(tabs)控制导航堆栈小结前言 默认情况下,SwiftUI提供的各种导航API在很大程度上是以用户直接输入为中心的——也就是说,导航是在系统...
    99+
    2024-04-02
  • uniapp小程序自定义顶部导航栏高度适配
    目录 自定义导航栏介绍: 自定义导航栏的使用 step1:取消默认的原生导航栏 step2:在页面中添加占位元素 自定义导航栏介绍:         一般用于图片等的填充或者其他特殊需求,如果使用纯色填充顶部栏可以直接使用navigati...
    99+
    2023-08-31
    uni-app 小程序 前端
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作