当前位置: 首页 > news >正文

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

1. Tab的简单使用了解

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

  • TabBar
  • TabBarView
  • TabController

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

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色)),);}
}class Home extends StatelessWidget {const Home({super.key});Widget 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});Widget 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});Widget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色)),);}
}class Home extends StatelessWidget {const Home({super.key});Widget 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 {Widget 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 {Widget 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 {Widget 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});Widget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色)),);}
}class Home extends StatefulWidget {const Home({super.key});State<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;});}Widget 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"),]));}
}

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

相关文章:

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

1. Tab的简单使用了解 要实现tab(选项卡或者标签视图)需要用到三个组件&#xff1a; TabBarTabBarViewTabController 这一块&#xff0c;我也不知道怎么整理了&#xff0c;直接提供代码吧&#xff1a; import package:flutter/material.dart;void main() {runApp(MyApp());…...

CSS核心

CSS的引入方式 内部样式表是在 html 页面内部写一个 style 标签&#xff0c;在标签内部编写 CSS 代码控制整个 HTML 页面的样式。<style> 标签理论上可以放在 HTML 文档的任何地方&#xff0c;但一般会放在文档的 <head> 标签中。 <style> div { color: r…...

Deepseek本地部署(ollama+open-webui)

ollama 首先是安装ollama&#xff0c;这个非常简单 https://ollama.com/ 下载安装即可 open-webui 这个是为了提供一个ui&#xff0c;毕竟我们也不想在cmd和模型交互&#xff0c;很不方便。 第一&#xff0c;需要安装python3.11&#xff0c;必须是3.11&#xff08;其他版…...

PaddleSeg 从配置文件和模型 URL 自动化运行预测任务

git clone https://github.com/PaddlePaddle/PaddleSeg.git# 在ipynb里面运行 cd PaddleSegimport sys sys.path.append(/home/aistudio/work/PaddleSeg)import os# 配置文件夹路径 folder_path "/home/aistudio/work/PaddleSeg/configs"# 遍历文件夹&#xff0c;寻…...

数据结构 队列

目录 前言 一&#xff0c;队列的基本知识 二&#xff0c;用数组实现队列 三&#xff0c;用链表实现队列 总结 前言 接下来我们将学习队列的知识&#xff0c;这会让我们了解队列的基本概念和基本的功能 一&#xff0c;队列的基本知识 (Queue) 我们先来研究队列的ADT&#xff0c…...

Cocoa和Cocoa Touch是什么语言写成的?什么是Cocoa?编程语言中什么是框架?为什么苹果公司Cocoa类库有不少NS前缀?Swift编程语言?

Cocoa和Cocoa Touch是什么语言写成的? 二者主要都是用Objective-C语言编写而成的。 什么是Cocoa? Cocoa是苹果操作系统macOS和iOS上的应用程序开发框架集合&#xff0c;核心语言是Objective-C编程语言&#xff0c;在移动平台被称为Cocoa Touch&#xff0c;Cocoa包含多个子框架…...

登录管理——认证方案(JWT、拦截器、ThreadLocal、短信验证)

两种常见的认证方案 基于Session认证 登录状态信息保存在服务器内存中&#xff0c;若访问量增加&#xff0c;单台节点压力会较大集群环境下需要解决集群中的各种服务器登录状态共享问题 解决方案&#xff1a;将登录状态保存的Redis中&#xff0c;从Redis中查找登录状态 基于…...

Java实现LFU缓存策略实战

LFU算法原理在Java中示例实现集成Caffeine的W-TinyLFU策略缓存实战总结LFU与LRU稍有不同,LFU是根据数据被访问的频率来决定去留。尽管它考虑了数据的近期使用,但它不会区分数据的首次访问和后续访问,淘汰那些访问次数最少的数据。 这种缓存策略主要用来处理以下场景: 数据…...

物业系统改革引领行业智能化管理与提升服务质量的新征程

内容概要 在当今迅速变化的社会中&#xff0c;物业系统改革正在悄然推动行业的智能化管理进程。物业管理作为一个古老而传统的领域&#xff0c;面临着诸多挑战&#xff0c;包括效率低下、业主需求难以满足等。数字化转型为这一现象注入了新活力&#xff0c;帮助物业公司通过先…...

QT+mysql+python 效果:

# This Python file uses the following encoding: utf-8 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QMessageBox from PySide6.QtGui import QStandardItemModel, QStandardItem # 导入需要的类# Important: # 你需要通过以下指令把 form.ui转为ui…...

动手学图神经网络(4):利用图神经网络进行图分类

利用图神经网络进行图分类:从理论到实践 引言 在之前的学习中,大家了解了如何使用图神经网络(GNNs)进行节点分类。本次教程将深入探讨如何运用 GNNs 解决图分类问题。图分类是指在给定一个图数据集的情况下,根据图的一些结构属性对整个图进行分类,而不是对图中的节点进…...

【Block总结】PConv,部分卷积|即插即用

论文信息 标题: Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks 论文链接: https://arxiv.org/pdf/2303.03667 GitHub链接: https://github.com/JierunChen/FasterNet 创新点 该论文的核心创新在于提出了一种新的运算符——部分卷积&#xff08;PCo…...

接口使用实例(1)

大家好&#xff0c;今天我们来看看接口的一些实例&#xff0c;关于如何定义和实现接口&#xff0c;相信通过这些例子&#xff0c;我们能有一些清晰的认知。 先定义一个学生类&#xff1a; 再给定一个学生数组&#xff0c;对这个对象数组中的元素进行排序&#xff08;按分数排&…...

动态规划DP 最长上升子序列模型 总览

最长上升子序列模型 1. 最长上升子序列 1.1 怪盗基德的滑翔伞 1.1.1 登山 1.1.2 合唱队形 1.2 友好城市 1.3 最长上升子序列和 1.4 导弹拦截...

网络工程师 (7)进程管理

一、进程相关的概念 &#xff08;一&#xff09;定义 进程&#xff08;Process&#xff09;是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;也是操作系统结构的基础。进程是程序的一次执行实例&#xff0c;具有动…...

登录授权流程

发起一个网络请求需要&#xff1a;1.请求地址 2.请求方式 3.请求参数 在检查中找到request method&#xff0c;在postman中设置同样的请求方式将登录的url接口复制到postman中&#xff08;json类型数据&#xff09;在payload中选择view parsed&#xff0c;将其填入Body-raw中 …...

Flutter_学习记录_导航和其他

Flutter 的导航页面跳转&#xff0c;是通过组件Navigator 和 组件MaterialPageRoute来实现的&#xff0c;Navigator提供了很多个方法&#xff0c;但是目前&#xff0c;我只记录我学习过程中接触到的方法&#xff1a; Navigator.push(), 跳转下一个页面Navigator.pop(), 返回上一…...

二叉树-堆(补充)

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…...

Big Bird:适用于更长序列的Transformer模型

摘要 基于Transformer的模型&#xff0c;如BERT&#xff0c;已成为自然语言处理&#xff08;NLP&#xff09;中最成功的深度学习模型之一。然而&#xff0c;它们的一个核心限制是由于其全注意力机制&#xff0c;对序列长度的二次依赖&#xff08;主要是在内存方面&#xff09;…...

doris:MySQL Load

Doris 兼容 MySQL 协议&#xff0c;可以使用 MySQL 标准的 LOAD DATA 语法导入本地文件。MySQL Load 是一种同步导入方式&#xff0c;执行导入后即返回导入结果。可以通过 LOAD DATA 语句的返回结果判断导入是否成功。一般来说&#xff0c;可以使用 MySQL Load 导入 10GB 以下的…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...