Flutter_学习记录_Tab的简单Demo~真的很简单

embedded/2025/1/30 22:15:11/

1. Tab的简单使用了解

要实现tab(选项卡或者标签视图)需要用到三个组件：

  • TabBar
  • TabBarView
  • TabController

这一块，我也不知道怎么整理了，直接提供代码吧：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色)),);}
}class Home extends StatelessWidget {const Home({super.key});@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3, child: Scaffold(appBar: AppBar(leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0,bottom: TabBar(unselectedLabelColor: Colors.black38,indicatorColor: Colors.black54,indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 1.0,tabs: [Tab(icon: Icon(Icons.local_florist)),Tab(icon: Icon(Icons.change_history)),Tab(icon: Icon(Icons.directions_bike)),]),),body: TabBarView(children: [Icon(Icons.local_florist, size: 128.0, color: Colors.black12),Icon(Icons.change_history, size: 128.0, color: Colors.black12),Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),]),));}
}

效果图如下:
在这里插入图片描述

2. Drawer 侧边栏简单使用

在手势在屏幕进行左滑手势时，可以通过设置drawer属性，来实现侧边栏显示的效果。

侧边栏代码的实现如下（为了避免代码太长，新建一个实现Drawer视图的文件）：

import 'package:flutter/material.dart';class DrawerDemo extends StatelessWidget {const DrawerDemo({super.key});@overrideWidget build(BuildContext context) {return Drawer(child: ListView(padding: EdgeInsets.zero,children: [// DrawerHeader(//   decoration: BoxDecoration(//     color: Colors.greenAccent//   ),//   child: Text("Header".toUpperCase()),// ),UserAccountsDrawerHeader(accountName: Text("zhuzhu", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black)), accountEmail: Text("zhuzhu@com.net", style: TextStyle(color: Colors.black),),currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://img1.baidu.com/it/u=1368815763,3761060632&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=434"),),decoration: BoxDecoration(image: DecorationImage(image: NetworkImage("https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg"),fit: BoxFit.cover,colorFilter: ColorFilter.mode(Colors.yellow.withAlpha(150), BlendMode.srcOver))),),ListTile(title: Text("Message", textAlign: TextAlign.right),trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),onTap: () => Navigator.pop(context), // 关闭抽屉),ListTile(title: Text("Favorite", textAlign: TextAlign.right),trailing: Icon(Icons.favorite, color: Colors.black12, size: 22.0),onTap: () => Navigator.pop(context), // 关闭抽屉),ListTile(title: Text("Settings", textAlign: TextAlign.right),trailing: Icon(Icons.settings, color: Colors.black12, size: 22.0),onTap: () => Navigator.pop(context), // 关闭抽屉),],),);}
}

然后将DrawerDemo 添加到drawer属性里，代码如下：

import 'package:flutter/material.dart';
import 'Demo/Drawer_demo.dart'; // 导入DrawerDemo所在的文件void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色)),);}
}class Home extends StatelessWidget {const Home({super.key});@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3, child: Scaffold(appBar: AppBar(leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0,bottom: TabBar(unselectedLabelColor: Colors.black38,indicatorColor: Colors.black54,indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 1.0,tabs: [Tab(icon: Icon(Icons.local_florist)),Tab(icon: Icon(Icons.change_history)),Tab(icon: Icon(Icons.directions_bike)),]),),body: TabBarView(children: [Icon(Icons.local_florist, size: 128.0, color: Colors.black12),Icon(Icons.change_history, size: 128.0, color: Colors.black12),Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),]),// 添加侧边栏， 用扫动的手势来显示这个侧边栏drawer: DrawerDemo()));}
}

效果如下：
在这里插入图片描述

3. 底部导航栏的添加

底部导航栏的添加，可以通过属性bottomNavigationBar来设置，实现它需要用到这两个组件：

  • BottomNavigationBar
  • BottomNavigationBarItem

之前页面都是静态页面，创建的类也都是继承于StatelessWidget，但是点击tabbar需要根据点击改变状态，所以，就需要用新的组件StatefulWidget。这一次就先只记录怎么使用，后面有时间把这个控件的说明再补充上。

根据前面的代码，抽取出一些代码，并创建以下三个类：

  • ExploreDemo
import 'package:flutter/material.dart';
import 'ListView_demo.dart';
import 'Drawer_demo.dart';class  ExploreDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3, child: Scaffold(appBar: AppBar(leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0,bottom: TabBar(unselectedLabelColor: Colors.black38,indicatorColor: Colors.black54,indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 1.0,tabs: [Tab(icon: Icon(Icons.local_florist)),Tab(icon: Icon(Icons.change_history)),Tab(icon: Icon(Icons.directions_bike)),]),),body: TabBarView(children: [ListViewDemo(),Icon(Icons.change_history, size: 128.0, color: Colors.black12),Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),]),// 添加侧边栏， 用扫动的手势来显示这个侧边栏drawer: DrawerDemo()));}
}
  • HistoryDemo
import 'package:flutter/material.dart';class  HistoryDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("历史记录")),body: Container(child: Center(child: Text("历史记录"),),));}
}
  • MyviewDemo
import 'package:flutter/material.dart';class  MyviewDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("个人主页")),body: Container(child: Center(child: Text("个人主页"),),));}
}

基础工作做好后，在main.dart 文件中，实现如下代码：

import 'package:flutter/material.dart';
import 'Demo/Explore_demo.dart';
import 'Demo/History_demo.dart';
import 'Demo/MyView_demo.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色)),);}
}class Home extends StatefulWidget {const Home({super.key});@overrideState<StatefulWidget> createState() {return _HomeState();}
}class _HomeState extends State<Home> {int _currentPageIndex = 0;// 提前创建3个视图，当点击tabbar的时候，调用setState的index来去对应的页面final List<Widget> pageLists = [ExploreDemo(),HistoryDemo(),MyviewDemo()];void _onTapHandler (int index) {// 更新状态setState(() {_currentPageIndex = index;});}@overrideWidget build(BuildContext context) {return Scaffold(// 根据_currentPageIndex展示视图body: pageLists[_currentPageIndex],// 设置底部tabbarbottomNavigationBar: BottomNavigationBar(currentIndex: _currentPageIndex,onTap: _onTapHandler,type: BottomNavigationBarType.fixed,fixedColor: Colors.black,items: [BottomNavigationBarItem(icon: Icon(Icons.explore),label: "explore"),BottomNavigationBarItem(icon: Icon(Icons.history),label: "history"),BottomNavigationBarItem(icon: Icon(Icons.person),label: "My"),]));}
}

效果图如下：
请添加图片描述


http://www.ppmy.cn/embedded/158173.html

相关文章

为AI聊天工具添加一个知识系统 之78 详细设计之19 正则表达式 之6

为AI聊天工具添加一个知识系统 之78 详细设计之19 正则表达式 之6

本文要点 要点 本项目设计的正则表达式 是一个 动态正则匹配框架。它是一个谓词系统&#xff1a;谓词 是运动&#xff0c;主语是“维度”&#xff0c;表语是 语言处理。主语的一个 双动结构。 Reg三大功能 语法验证、语义检查和 语用检验&#xff0c;三者 &#xff1a;语义约…
阅读更多...
C#AWS signatureV4对接Amazon接口

C#AWS signatureV4对接Amazon接口

马上要放假了&#xff0c;需要抓紧时间测试对接一个三方接口&#xff0c;对方是使用Amazon服务的&#xff0c;国内不多见&#xff0c;能查的资(代)料(码)&#xff0c;时间紧比较紧&#xff0c;也没有时间去啃Amazon的文档&#xff0c;主要我的英文水平也不行&#xff0c;于是粗…
阅读更多...
「AI学习笔记」深度学习的起源与发展：从神经网络到大数据（二）

「AI学习笔记」深度学习的起源与发展：从神经网络到大数据（二）

深度学习&#xff08;DL&#xff09;是现代人工智能&#xff08;AI&#xff09;的核心之一&#xff0c;但它并不是一夜之间出现的技术。从最初的理论提出到如今的广泛应用&#xff0c;深度学习经历了几乎一个世纪的不断探索与发展。今天&#xff0c;我们一起回顾深度学习的历史…
阅读更多...
CentOS 7 搭建lsyncd实现文件实时同步 —— 筑梦之路

CentOS 7 搭建lsyncd实现文件实时同步 —— 筑梦之路

在 CentOS 7 上搭建 lsyncd&#xff08;Live Syncing Daemon&#xff09;以实现文件的实时同步&#xff0c;可以按照以下步骤进行操作。lsyncd 是一个基于 inotify 的轻量级实时同步工具&#xff0c;支持本地和远程同步。以下是详细的安装和配置步骤&#xff1a; 1. 系统准备 …
阅读更多...
数据分析学习路线

数据分析学习路线

阶段 1&#xff1a;数学与统计基础 1.1 数学基础 数据分析涉及大量的数学知识&#xff0c;尤其是统计学。虽然你不需要成为数学专家&#xff0c;但一些基本的数学概念对你理解数据分析非常重要。 线性代数&#xff1a; 矩阵运算&#xff1a;理解矩阵乘法、求逆等操作。特征值…
阅读更多...
NLP深度学习 DAY4：Word2Vec详解：两种模式（CBOW与Skip-gram）

NLP深度学习 DAY4：Word2Vec详解：两种模式（CBOW与Skip-gram）

用稀疏向量表示文本&#xff0c;即所谓的词袋模型在 NLP 有着悠久的历史。正如上文中介绍的&#xff0c;早在 2001年就开始使用密集向量表示词或词嵌入。Mikolov等人在2013年提出的创新技术是通过去除隐藏层&#xff0c;逼近目标&#xff0c;进而使这些单词嵌入的训练更加高效。…
阅读更多...
简易CPU设计入门：控制总线的剩余信号（四）

简易CPU设计入门：控制总线的剩余信号（四）

项目代码下载 请大家首先准备好本项目所用的源代码。如果已经下载了&#xff0c;那就不用重复下载了。如果还没有下载&#xff0c;那么&#xff0c;请大家点击下方链接&#xff0c;来了解下载本项目的CPU源代码的方法。 CSDN文章&#xff1a;下载本项目代码 上述链接为本项目…
阅读更多...
STM32外设应用

STM32外设应用

1. 什么是STM32外设&#xff1f; STM32微控制器集成了多种外设&#xff0c;这些外设可以帮助我们实现各种功能&#xff0c;比如控制LED灯、读取传感器数据、与其他设备通信等。常见的外设有GPIO&#xff08;通用输入输出&#xff09;、ADC&#xff08;模数转换器&#xff09;、…
阅读更多...
最新文章

Copyright @ 2022~2023