Flutter Scaffold 页面结构

Material是一套设计风格，提供了大量的小部件，这里用Material风格搭建一个常见的应用页面结构。

创建Material应用

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 关闭debug条幅home: Center(child: Text("首页"),),);}
}

这里实例化的MaterialApp，而不是一般的Center Widget。

使用图表 Icon

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 关闭debug条幅home: Center(child: Icon(Icons.star,color: Colors.amber,size: 128,),),);}
}

这里用到了Icon
所有Icons：https://fonts.google.com/icons
1

使用按钮 ElevatedButton

Flutter 提供了多种按钮小部件，这里ElevatedButton以为例。

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 关闭debug条幅home: Center(child: ElevatedButton(onPressed: () {print("点击了按钮！");},child: Text("一个按钮"))),);}
}

1

切换主题

定义两个主题样式

在app/themes/app_theme.dart下定义两个主题样式：一个浅色，一个深色。

import 'package:flutter/material.dart';class AppTheme {static ThemeData light = ThemeData(primaryColor: Colors.deepPurpleAccent,colorScheme: ColorScheme.light(primary: Colors.deepPurpleAccent,secondary: Colors.amber,));static ThemeData dark = ThemeData(primaryColor: Colors.deepPurpleAccent,colorScheme: ColorScheme.dark(primary: Colors.cyan,secondary: Colors.amber,));
}

调用主题样式

用MaterialApp的theme和darkTheme分别调用浅色和深色主题样式。

import 'package:flutter/material.dart';
import 'package:package_name/app/themes/app_theme.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 关闭debug条幅theme: AppTheme.light,darkTheme: AppTheme.dark,home: Center(child: ElevatedButton(onPressed: () {print("点击了按钮！");},child: Text("一个按钮"))),);}
}

在IOS的设置-开发者里设置深色外观：
1
1

Scaffold 页面结构

使用Scaffold小部件可以得到一个Material风格的页面结构，可以设置页面头部工具栏、页面主体、页面底部的导航栏、侧边抽屉、底部侧板、浮动按钮等。

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: DefaultTabController(// 设置默认Tab控制器length: 2,child: Scaffold(backgroundColor: Colors.amber,// 页面主体body: TabBarView(children: [Icon(Icons.explore_outlined,size: 128,color: Colors.black12,),Icon(Icons.local_fire_department,size: 128,color: Colors.black12,),]),appBar: AppBar(title: Text("页面标题"),leading: IconButton(onPressed: () {print("这是导航菜单");},icon: Icon(Icons.menu)),actions: [IconButton(onPressed: () {print("这是Action位置");},icon: Icon(Icons.more_horiz))],bottom: TabBar(tabs: [// 设置标签栏Tab(text: 'Tab1',),Tab(text: 'Tab2',)]),),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.explore_outlined), label: "发现"),BottomNavigationBarItem(icon: Icon(Icons.add_a_photo_outlined), label: "添加"),BottomNavigationBarItem(icon: Icon(Icons.account_circle_outlined), label: "用户")]),),));}
}

Scaffold
如果是VSCode编辑器，在StatelessWidget上按快捷键Ctrl/Command+.，执行Convert to StatefulWidget命令，可以把无状态小部件转换成有状态小部件。

import 'package:flutter/material.dart';class App extends StatefulWidget {@overrideState<App> createState() => _AppState();
}class _AppState extends State<App> {@overrideWidget build(BuildContext context) {return MaterialApp(）}
}

有状态小部件多出一个_AppState状态类，用于管理状态，通过createState、setState来创建和设置状态。

激活底部导航

import 'package:flutter/material.dart';class App extends StatefulWidget {@overrideState<App> createState() => _AppState();
}class _AppState extends State<App> {int currentAppBottomNavigationBarItem = 0;void onTabAppBottomNavigationBarItem(int index) {setState(() {currentAppBottomNavigationBarItem = index;});}@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: DefaultTabController(// 设置默认Tab控制器length: 2,child: Scaffold(backgroundColor: Colors.amber,// 页面主体body: TabBarView(children: [Icon(Icons.explore_outlined,size: 128,color: Colors.black12,),Icon(Icons.local_fire_department,size: 128,color: Colors.black12,),]),appBar: AppBar(title: Text("页面标题"),leading: IconButton(onPressed: () {print("这是导航菜单");},icon: Icon(Icons.menu)),actions: [IconButton(onPressed: () {print("这是Action位置");},icon: Icon(Icons.more_horiz))],bottom: TabBar(tabs: [// 设置标签栏Tab(text: 'Tab1',),Tab(text: 'Tab2',)]),),bottomNavigationBar: BottomNavigationBar(currentIndex: currentAppBottomNavigationBarItem,onTap: onTabAppBottomNavigationBarItem,items: [BottomNavigationBarItem(icon: Icon(Icons.explore_outlined), label: "发现"),BottomNavigationBarItem(icon: Icon(Icons.add_a_photo_outlined), label: "添加"),BottomNavigationBarItem(icon: Icon(Icons.account_circle_outlined), label: "用户")]),),));}
}

1

点击底部导航，切换显示小部件

  final pageMain = [TabBarView(children: [Icon(Icons.explore_outlined,size: 128,color: Colors.black12,),Icon(Icons.local_fire_department,size: 128,color: Colors.black12,),]),Center(child: Icon(Icons.add_a_photo_outlined,size: 128,color: Colors.black12,),),Center(child: Icon(Icons.account_circle_outlined,size: 128,color: Colors.black12,),)];

首先定义三个小部件列表，然后在body里按照索引来调用。

body: pageMain.elementAt(currentAppBottomNavigationBarItem),

1

动态显示或隐藏AppBar

用showAppBar来决定是否显示appBar。

class _AppState extends State<App> {// 是否显示应用栏bool showAppBar = true;int currentAppBottomNavigationBarItem = 0;void onTabAppBottomNavigationBarItem(int index) {setState(() {currentAppBottomNavigationBarItem = index;// 第一个显示，其他不显示showAppBar = index == 0;}

appBar: showAppBar ? AppBar(...) : null,

appBar设置为null，就是隐藏。

FloatingActionButton 漂浮动作按钮

floatingActionButton: FloatingActionButton(
onPressed: () {print('这是漂浮动作按钮。');
},
child: Icon(Icons.share_outlined),
backgroundColor: Colors.black,
foregroundColor: Colors.white,
)

用Scaffold的floatingActionButton参数，可以设置漂浮动作按钮。

定义部件

上面的小部件都是放在一起，我们还可以把一些把页面的部分小部件单独放到一个文件里，这里以appBar为例：

app_page_header.dart

import 'package:flutter/material.dart';class AppPageHeader extends StatelessWidget implements PreferredSizeWidget {@overridefinal Size preferredSize = Size.fromHeight(100);@overrideWidget build(BuildContext context) {return AppBar(title: Text("页面标题"),leading: IconButton(onPressed: () {print("这是导航菜单");},icon: Icon(Icons.menu)),actions: [IconButton(onPressed: () {print("这是Action位置");},icon: Icon(Icons.more_horiz))],bottom: TabBar(tabs: [// 设置标签栏Tab(text: 'Tab1',),Tab(text: 'Tab2',)]),);}
}

这里单独定义了一个AppPageHeader的类，作为appBar，然后我们就可以调用它了。

import 'package:package_name/app/components/app_page_header.dart';appBar: showAppBar ? AppPageHeader() : null,

BottomSheet 底部面板

这里点击浮动按钮显示底部面板，把浮动按钮单独封装成了一个单独的文件app_floating_action_button.dart：

import 'package:flutter/material.dart';class AppFloatingActionButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return FloatingActionButton(onPressed: () {print('这是漂浮动作按钮。');showBottomSheet(context: context,builder: (BuildContext context) {return SizedBox.expand(child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,mainAxisSize: MainAxisSize.min,children: <Widget>[const Text('漂浮动作按钮'),ElevatedButton(child: const Text('关闭'),onPressed: () => Navigator.pop(context),),],),),);},);},child: Icon(Icons.share_outlined),backgroundColor: Colors.black,foregroundColor: Colors.white,);}
}

调用：

floatingActionButton: AppFloatingActionButton(),

1

边栏抽屉

import 'package:flutter/material.dart';class AppPageAside extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer(child: Center(child: Text("边栏抽屉"),),);}
}

在Scaffold函数里用drawer参数调用：

drawer: AppPageAside(),

1

AppBar leading 位置显示抽屉

onPressed: () {Scaffold.of(context).openDrawer();
},

设置边栏抽屉显示的内容

import 'package:flutter/material.dart';class AppPageAside extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer(child: Center(child: ListView(padding: EdgeInsets.zero,children: [UserAccountsDrawerHeader(accountName: Text("姓名"), accountEmail: Text("abc@domain.com")),ListTile(title: Text("评论",textAlign: TextAlign.right,),trailing: Icon(Icons.comment_outlined),),ListTile(title: Text("账户",textAlign: TextAlign.right,),trailing: Icon(Icons.account_box_outlined),),ListTile(title: Text("退出",textAlign: TextAlign.right,),trailing: Icon(Icons.logout_outlined),),],),),);}
}

1

弹出菜单

import 'package:flutter/material.dart';class AppPageHeaderActionsMore extends StatelessWidget {@overrideWidget build(BuildContext context) {return PopupMenuButton(itemBuilder: (context) => [PopupMenuItem(value: 'stack',child: Icon(Icons.view_agenda_outlined,color: Colors.black12,),),PopupMenuItem(value: 'stack',child: Icon(Icons.dashboard_outlined,color: Colors.black12,),),],icon: Icon(Icons.more_horiz),offset: Offset(0, 50),onCanceled: () {print("弹出菜单按钮");},onSelected: (value) {print("弹出菜单按钮的值是 $value");},);}
}
AppBar(
......actions: [AppPageHeaderActionsMore(),]
......

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/68965.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C++】string类(上)：string类的常用接口介绍

【C++】string类(上)：string类的常用接口介绍

文章目录 前言一、C中设计string类的意义二、string类的常用接口说明1. string类对象的常见构造2. string类对象的容量操作2.1 size、capacity 和 empty的使用2.2 clear的使用2.3 reserve的使用2.4 resize的使用 3. string类对象的访问及遍历操作3.1 下标[ ] 和 at3.2 迭代器it…
阅读更多...
一文讲解Java中的ArrayList和LinkedList

一文讲解Java中的ArrayList和LinkedList

ArrayList和LinkedList有什么区别&#xff1f; ArrayList 是基于数组实现的&#xff0c;LinkedList 是基于链表实现的。 二者用途有什么不同&#xff1f; 多数情况下&#xff0c;ArrayList更利于查找&#xff0c;LinkedList更利于增删 由于 ArrayList 是基于数组实现的&#…
阅读更多...
[原创](Modern C++)现代C++的关键性概念: ＜format＞标准库提供的格式化std::format

[原创](Modern C++)现代C++的关键性概念: ＜format＞标准库提供的格式化std::format

常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共24年] 职业生涯: 22年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi、XCode、Eclipse、C Bui…
阅读更多...
STM32 DMA+AD多通道

STM32 DMA+AD多通道

接线图 代码配置 ADC单次扫描DMA单次转运模式 uint16_t AD_Value[4]; //DMAAD多通道 void DMA_Config(void) {//定义结构体变量 GPIO_InitTypeDef GPIO_InitStructure;//定义GPIO结构体变量 ADC_InitTypeDef ADC_InitStructure; //定义ADC结构体变量 DMA_InitTypeDef DMA_In…
阅读更多...
浅谈《图解HTTP》

浅谈《图解HTTP》

感悟 滑至尾页的那一刻&#xff0c;内心突兀的涌来一阵畅快的感觉。如果说从前对互联网只是懵懵懂懂&#xff0c;但此刻却觉得她是如此清晰而可爱的呈现在哪里。 介绍中说&#xff0c;《图解HTTP》适合作为第一本网络协议书。确实&#xff0c;它就像一座桥梁&#xff0c;连接…
阅读更多...
Alibaba开发规范_异常日志之日志规约：最佳实践与常见陷阱

Alibaba开发规范_异常日志之日志规约：最佳实践与常见陷阱

文章目录 引言1. 使用SLF4J日志门面规则解释代码示例正例反例 2. 日志文件的保存时间规则解释 3. 日志文件的命名规范规则解释代码示例正例反例 4. 使用占位符进行日志拼接规则解释代码示例正例反例 5. 日志级别的开关判断规则解释代码示例正例反例 6. 避免重复打印日志规则解释…
阅读更多...
自动化软件测试的基本流程

自动化软件测试的基本流程

一、自动化测试的准备 1.1 了解测试系统 首先对于需要测试的系统我们需要按照软件需求说明书明确软件功能。这里以智慧养老系统作为案例进行测试&#xff0c;先让我们看看该系统的登录界面和用户管理界面。 登录界面&#xff1a; 登录成功默认界面&#xff1a; 用户管理界面…
阅读更多...
Windows电脑本地部署运行DeepSeek R1大模型（基于Ollama和Chatbox）

Windows电脑本地部署运行DeepSeek R1大模型（基于Ollama和Chatbox）

文章目录 一、环境准备二、安装Ollama2.1 访问Ollama官方网站2.2 下载适用于Windows的安装包2.3 安装Ollama安装包2.4 指定Ollama安装目录2.5 指定Ollama的大模型的存储目录 三、选择DeepSeek R1模型四、下载并运行DeepSeek R1模型五、常见问题解答六、使用Chatbox进行交互6.1 …
阅读更多...
Android 深入探究 JSONObject 与 JSONArray：Android 中的数据解析与数组操作全解析

Android 深入探究 JSONObject 与 JSONArray：Android 中的数据解析与数组操作全解析

在现代软件开发中&#xff0c;数据的传输和存储形式多种多样&#xff0c;而 JSON&#xff08;JavaScript Object Notation&#xff09;以其简洁、易读、便于解析的特点&#xff0c;成为了最常用的数据格式之一。在 Android 开发中&#xff0c;JSONObject和JSONArray同样是处理 …
阅读更多...
机器学习day5

机器学习day5

自定义数据集 使用tensorflow框架实现逻辑回归并保存模型&#xff0c;然后保存模型后再加载模型进行预测 代码 import tensorflow as tf import numpy as np# 1. 自定义数据集 data [[-0.5, 7.7], [1.8, 98.5], [0.9, 57.8], [0.4, 39.2], [-1.4, -15.7], [-1.4, -37.3], [-1…
阅读更多...
计算机网络中常见高危端口有哪些？如何封禁高危端口？

计算机网络中常见高危端口有哪些？如何封禁高危端口？

保障网络安全&#xff0c;从封禁高危端口开始&#xff01; 在计算机网络中&#xff0c;端口是设备与外界通信的“大门”&#xff0c;但某些端口因常被黑客利用而成为高危入口。封禁这些端口是防御网络攻击的关键一步。本文将详解 10个常见高危端口&#xff0c;并提供多平台封禁…
阅读更多...
ZK-ALU-在有限域上实现左移

ZK-ALU-在有限域上实现左移

先看在实数域上实现左移, 再看在有限域上的实现 左移-整数 计算机中的左移计算&#xff08;<< 操作&#xff09;通常由处理器的硬件电路直接支持&#xff0c;因此效率非常高。在编程语言中&#xff0c;左移操作可以通过位移运算符&#xff08;例如 C/C 中的 <<&a…
阅读更多...
CommonJS

CommonJS

CommonJS 是由 JavaScript 社区于 2oo9 年提出的包含模块、文件、IO、控制台在内的一系列标准。Node.js 的实现中采用了 CommonJS 标准的一部分&#xff0c;并在其基础上进行了一些调整。我们所说的 CommonJS 模块和 Node.js 中的实现并不完全一样&#xff0c;现在一般谈到 Com…
阅读更多...
android java 用系统弹窗的方式实现模拟点击动画特效

android java 用系统弹窗的方式实现模拟点击动画特效

接上一篇&#xff1a;android java系统弹窗的基础模板-CSDN博客 本篇记录的是系统弹窗的一个应用示例&#xff1a;实现点击动画效果 首先模拟点击的实现参考&#xff1a;android模拟点击_motionevent upevent motionevent.obtain(systemclo-CSDN博客 动画效果&#xff0c;是…
阅读更多...
基于最近邻数据进行分类

基于最近邻数据进行分类

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 完整代码&#xff1a; import torch import numpy as np from sklearn.neighbors import KNeighborsClassifier from sklearn.metrics import accuracy_score import matplotlib.pyplot as plt# 生成一个简单的数据…
阅读更多...
[SAP ABAP] ABAP SQL跟踪工具

[SAP ABAP] ABAP SQL跟踪工具

事务码ST05 操作步骤 步骤1&#xff1a;使用事务码ST05之前&#xff0c;将要检测的程序生成的页面先呈现出来&#xff0c;这里我们想看下面程序的取数操作&#xff0c;所以停留在选择界面 步骤2&#xff1a; 新建一个GUI窗口&#xff0c;输入事务码ST05&#xff0c;点击 Acti…
阅读更多...
算法的时间复杂度

算法的时间复杂度

什么是时间复杂度&#xff1f; 算法的时间复杂度是算法的执行效率 算法的执行时间和算法输入值之间的关系&#xff0c;与函数中代码的执行次数有关。 常见的时间复杂度案例分析&#xff1a; O(1) 算法的执行时间和输入值无关 O(logn) 算法的执行时间和代码的执行次数呈log…
阅读更多...
蓝桥杯备考：高精度算法之除法

蓝桥杯备考：高精度算法之除法

我们除法的高精度其实也不完全是高精度&#xff0c;而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9&#xff0c;当它真正是1e9的时候&#xff0c;t是有可能超过1e9的&#xff0c;所以要用long long
阅读更多...
重新刷题求职2-DAY1

重新刷题求职2-DAY1

DAY1 1.704. 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 最普通的二分查找&#xff0c;查用的习惯左闭右…
阅读更多...
算法竞赛（Python）-堆栈

算法竞赛（Python）-堆栈

文章目录 一 基础知识二 题目有效的括号字符串解码 一 基础知识 堆栈&#xff08;Stack&#xff09;&#xff1a;简称为栈。一种线性表数据结构&#xff0c;是一种只允许在表的一端进行插入和删除操作的线性表。   我们把栈中允许插入和删除的一端称为 「栈顶&#xff08;top…
阅读更多...
最新文章

Copyright @ 2022~2023