首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutte部件目录-Material Components 顶

应用程序结构和导航 Scaffold Appbar 上面两个基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间顶层视图之间切换。...BottomNavigationBar小部件实现此组件。 一个显示应用底部的材质小部件,用于少量视图中进行选择,通常介于3到5之间。...浮动动作按钮最常用于Scaffold.floatingActionButton字段。 ? FlatButton 平面按钮材料组件部件打印的部分,通过填充颜色对触摸作出反应。 ?...IconButton 图标按钮是一个打印材质小部件的图片,通过填充颜色(墨水)对触摸作出反应。 ?...将按钮封装在工具提示窗口小部件中,以便在按下窗口小部件(或者当用户采取其他适当的操作显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。

9.4K40

15.Flutter学习之路按钮组件系列

FlatButton:扁平化的按钮 OutlineButton:线框按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮 RaisedButton 属性 描述 textColor...文本颜色 color 按钮颜色 disabledColor 按钮被禁用时的颜色 disabledTextColor 按钮被禁用时的文本颜色 splashColor 点击按钮时水波纹的颜色 highlightColor...点击(长按)按钮按钮的颜色 elevation 阴影的范围,值越大阴影范围越大 padding 内边距 shape 设置按钮形状 FloatingActionButton 属性 描述 child...子视图,一般为Icon tooltip FAB被长按时显示,也是无障碍功能 backgroundColor 背景颜色 elevation 未点击的阴影 highlightElevation 点击阴影值..._bottomIndex,//对应点击/显示哪个底部导航栏按钮 onTap: (index){ //bottomNavigationBar点击事件 setState

55610
您找到你想要的搜索结果了吗?
是的
没有找到

Flutter 全局控制底部导航栏和自定义导航栏的方法

例如,平板电脑或大屏幕设备,使用自定义导航栏能够更好地利用屏幕空间,提供更丰富的导航和功能;而在手机端,底部导航栏可能更符合用户的使用习惯和操作方式。...枚举类型的使用 Flutter中,枚举类型(Enum)是一种有限的、离散的数据类型,用于表示一组相关的常量值。枚举类型表示一组可能的选项非常有用,可以提高代码的可读性和可维护性。...应用的根部件中,使用 NavigationType 来决定当前显示的导航栏类型。 设置页面中,提供一个开关按钮或者下拉菜单,让用户选择喜欢的导航栏类型。... build 方法中,我们根据 _navigationType 的值选择显示不同类型的导航栏,并且底部导航栏添加了一个浮动动作按钮点击按钮可以切换导航栏类型。...通过定义枚举类型、状态管理和条件判断,我们可以根据用户的选择显示不同类型的导航栏,并且提供一个浮动按钮来切换导航栏类型。

21910

Flutter BottomNavigation 底部导航详解 及问题记录

currentIndex = 0; static const int mainNum = 0xFFFA8C16; 这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用 颜色..., 按钮,图标 Colors.white // 白色颜色 Icons.home // home 图标 FloatingActionButton // 漂浮的按钮 效果图 colors.dart中查看预设颜色值...Widget>[ Text('It is my message page') ], ), ) ); } } 事件处理 按钮点击事件...setState(() {_counter++;}); } 使用void关键字修饰, 使用setState 来修改内部变量 问题1: 假如页面停留在首页, 此时来了一个消息,需要在消息的导航栏加上徽标...问题3: 目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用 问题4: 如何在页面切换 ,使用动画,自己写?框架有预设吗?

3.1K10

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

UI 显示 ; 设置点击方法 : BottomNavigationBar 的 onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击按钮索引 , 该方法中主要操作当前的 currentIndex...属性变量 , 以及 PageView 页面跳转 ; 底部按钮设置 : BottomNavigationBar 的 item 属性设置若干 BottomNavigationBarItem 类型的点击按钮...BottomNavigationBar 的当前索引值 , 并更新 UI 界面 ; 显示组件 : children 参数中设置 Widget 数组即可 , 组件类型只要是 Widget 就行 ; 代码示例...// 更新当前的索引值 _currentIndex = index; }); }, /// Widget 组件数组 , 设置多个 Widget 组件 /// 同一间只显示一个页面组件...参数中 , 可以获取点击按钮索引 , 然后调用 PageView 的 PageController 的 jumpToPage 方法 实现相应的界面跳转 ; BottomNavigationBar(

4.1K20

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

List children 字段 , PageController 用于控制 PageView 中的页面跳转 , children 中就是 PageView 封装的多个界面组件 , 同一间只显示一个...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , BottomNavigationBarType?..., /// 都会根据当前点击的选项而改变 , /// 改变的时候有切换动画 /// 选中的状态下显示底部图标的文本 /// 不选中的状态下隐藏底部的文本内容 shifting...onTap 字段设置点击事件 , 传入的参数是点击的底部导航栏索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key?..., /// 导航栏按钮点击事件 onTap: (pageIndex) { /// 跳转到对应的导航页面 _pageController.jumpToPage(pageIndex)

5.7K50

【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

组件是悬浮按钮组件 ; FloatingActionButton 组件常用设置 : 点击事件 : onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码...Scaffold 组件的 floatingActionButton 字段 ; onPressed 字段设置点击事件 , child 设置显示组件 ; Scaffold( // 设置悬浮按钮 floatingActionButton...: 三目运算符 ), ); } } 运行效果 : 打印结果 : 点击悬浮按钮后打印如下内容 ; I/flutter (23329): 悬浮按钮点击 二、RefreshIndicator...回调该方法 ; 异步方法 , 方法体前添加 async 关键字 ; 该方法的主要作用是暂停 500 ms , 然后返回空 ; /// RefreshIndicator 发生下拉操作, 回调该方法...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作, 回调该方法 /// 该方啊是一个异步方法 , 方法体前添加 async 关键字

2.6K00

Flutter质感设计之底部导航

BottomNavigationBar即底部导航栏控件。显示应用底部的质感设计控件,用于少量视图中切换。...底部导航栏包含多个以标签、图标或两者搭配的形式显示项目底部的项目,提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕,侧面导航可能更好。...,包含程序当前内容描述的文本 title: new Text('底部导航演示'), // 标题控件后显示的控件 actions: <Widget [ // 创建一个显示弹出式菜单的按钮 new PopupMenuButton.../ 通知框架此对象的内部状态已更改 setState((){ // 存储底部导航栏的布局和行为:选择值 _type = value; }); }, // 点击弹出菜单中显示的项目时调用 itemBuilder...,沿着程序的底部显示 bottomNavigationBar: botNavBar, ); } } // 程序入口 void main() { // 创建质感设计程序,并放置到主屏幕 runApp(new

3K21

Flutter 中自定义动画底部导航栏

介绍: 显示应用程序底部的Material小部件,用于几个视角中进行选择,通常在 3 到 5 范围内的某个位置。底部导航栏包含各种选项,文本标签、图标或两者。...这个演示视频展示了如何在 flutter 中使用自定义的底部导航栏。它展示了自定义底部导航栏将如何在您的 Flutter 应用程序中工作。...它显示当用户点击底部导航栏图标,它们将被动画化并显示标签文本。当用户点击任何图标,颜色也会发生变化和动画。它将显示您的设备。...showElevation:此属性用于此导航栏是否应显示高程。默认为真。 Listitems:该属性用于定义底部导航栏中显示按钮的外观。这应该至少有两个项目,最多五个。...如何在 dart 文件中实现代码 创建一个新的 dart 文件*my_home_page.dart*。 构建方法中,我们将返回一个 scaffold()。在里面我们将添加一个 appBar。

8.8K30

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

未经过改装的MaterialApp 可以说MaterialApp基于WidgetsApp 如果对MaterialApp不熟悉,可先看我一篇文章: Flutter之MaterialApp使用详解...打开检查覆盖,该字段只能在检查模式下可用 3. inspectorSelectButtonBuilder 构建一个视图视图切换的小部件,可以通过该小部件或按钮切换到检查模式(debugShowWidgetInspector...==true才有效,点击按钮之后再点击你要检查的视图) new WidgetsApp( debugShowWidgetInspector: true, inspectorSelectButtonBuilder..."/")返回home的Widget 所以可以推测当程序启动,会调用一个以"/"为路由名的Widget 下面来看一段源码 Route _onGenerateRoute(RouteSettings..._onGenerateRoute : null, ) 5. routes 这个字段上面源码已经解释的很清楚 就是 _onGenerateRoute方法里面查找合适的路由 查找不到才自身字段

2K30

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

一篇讲完 Flutter 中的一些基本部件,这篇就先填完上篇留下的没写的 AppBar 的坑,以及 Scaffold 其他参数的使用,开始前,先补一张缩略版的脑图 ?...PopupMenuItem(value: _abs[index], child: Text(_abs[index])))) ], ), ); } } 最后的效果图,未点击右侧按钮如左侧所示...,点击右侧按钮会弹出相应的 mune ?...TabBar 的位置,界面显示的内容都会随之改变,同时,解决前面 Scaffold 留下 body 属性没讲的一个坑,就剩下 drawer 、 bottomNavigationBar 属性没讲了,解决这两个坑之前...,把 body 传入的 PageView 修改成单个 TabChangePage ,然后把 TabChangePage 这个类做下修改,把 Container 的 aligment 属性也注释了,这样显示的内容就会显示左上角

1.7K20

flutter中的底部导航栏切换

“本文主要介绍flutter中的底部导航栏切换 做android原生开发,底部导航栏是通过自定义布局,图片自己上网找,点击之后还要变色,切换的时候使用fragment,切换下一个的同时上一个隐藏……...,用同一个模板, 分类界面,显示绿色的框 import 'package:flutter/material.dart'; class CategoryPage extends StatefulWidget...组件,可以直接显示底部按钮,onTap方法进行交互, setState方法可以实时渲染修改界面,currentIndex表示当前按下的位置 import 'package:flutter/material.dart..._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this....BuildContext context) { return MaterialApp( home:Tabs() ); } } 所有代码都在,直接运行即可 思考 本质

3.5K20

Flutter跨页面改变BottomNavigationBar选中下标

前言 需求是这样的,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮让TabBar选中B页面展示,通俗来讲就是两个不相邻的Widget里,一个Widget...Widget的状态显示 解决方案2: 使用event_bus 发送事件广播 ,A页面发送广播,tabBar监听广播并改变下标 下面是代码部分 方案1(Provider方案) 代码: 1.编写Provider...unselectedItemColor: Color.fromRGBO(142, 142, 147, 1), onTap: (index){ // 点击方法内改变下标重新刷新...页面调用这个Provider 使tabBar改变选中下标 // A页面的点击函数内 GestureDetector( onTap: () {...tabBar切换选中页面 class EventTabBarIndex{ // 参数为int 即需要改变的下标 int index; EventTabBarIndex(this.index); } 2.BottomNavigationBar

1.1K20

Flutter实现页面切换后保持原页面状态的3种方法

它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果...[currentIndex] ); } } 其中的三个子页面结构相同,均显示一个计数器和一个加号按钮,以first_page.dart为例: /// first_page.dart import...可以看到,从第二页切换回第一页,第一页的状态已经丢失 第二步:实现底部导航切换保持原页面状态 可能有些小伙伴搜索后会开始直接使用官方推荐的AutomaticKeepAliveClientMixin...physics: NeverScrollableScrollPhysics(), // 禁止滑动 )) ], )); } } 其中推荐页、VIP页、小说页、直播页的结构仍和之前的首页结构相同,仅显示一个计数器和一个加号按钮...second initState,仅当第一次点击底部导航切换至该页,该子页的State被实例化。

2.5K30

《Flutter》-- 4.Flutter组件基础

Widget不是最终显示设备屏幕显示元素,而是一个描述显示元素的配置数据。Flutter中真正代表屏幕显示元素的类是Element。...initState():状态组件被插入视图树时调用,状态组件的生命周期中只被调用一次。...dispose():当状态组件需要被永久地从视图树中移除,调用dispose()。调用dispose()后,组件会被销毁,调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。...decoration:用于控制TextField组件的外观显示提示文本、背景颜色和边框。 textAlign:输入框内文本水平方向的对齐方式。 textDirection:输入框内文本的方向。...keyboardAppearance:设置键盘的亮度模式,只能在iOS使用。 onTap:TextField组件的点击事件。

12.4K30

掌握Flutter底部导航栏:畅游导航之旅

底部导航栏通常位于屏幕底部,由一组导航项(通常是图标和标签组合)组成,用户可以通过点击不同的导航项来切换应用程序的不同部分。...接下来的章节中,我们将深入探讨如何在Flutter中创建和定制底部导航栏,包括基本结构的构建、外观的定制、与页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏的实现技巧与方法。 3....如果用户已登录,则显示“Home”和“Search”导航项;如果用户未登录,则显示“Login”导航项。...7.3 实现底部导航栏的动画效果 为了提升用户体验,有时候我们还可以为底部导航栏添加一些动画效果,例如切换导航项的渐变动画、滑动导航栏的缩放动画等。...此外,我们还探讨了如何利用状态管理库(Provider和Bloc)来管理底部导航栏的状态,以及如何实现一些高级功能,添加徽章、动态更改导航栏项以及实现动画效果等。

13310

建站四部曲之移动端篇(Android+上线)

伴随动画按钮的标签内 BottomNavigationBar伴随列表显隐的Behavior 写在RecyclerView标签内 Behavior的详细介绍可见:Android材料设计之Behavior...(V)的粘合,通过逻辑进行不同的视图展现 也就是说我写P的实现类中,管你MV怎么实现的么,你家老子(M,V的接口)我手上,我还怕什么 视图层(V),V手里也有控制层的老子(P的接口),所以V也是怎么想的...-> { mPagerPresenter.updateByArea(area, 0, 1000); }); ---- 1.3:点击切换 也就是根据点击出判断类型,根据类型使用控制层刷新视图...下载.png 4.前端React稍微修改: 这样点击就能下载了 ? 下载3.png ?...下载2.png ---- 基本的点都讲到了,虽然不是面面俱到,整体hold住就差不多了 源码最后,有兴趣的可以看看,总结以下,到此为止,用了五天的时间做了以下事: 1.使用SpringBoot

75930

带你快速掌握Flutter的视图(Widgets)

Android中,View是屏幕显示的所有内容的基础, 按钮、工具栏、输入框等一切都是View。 iOS 中,构建 UI 的过程中将大量使用 view 对象。...StatelessWidgets适用于当我们描述的用户界面不依赖于对象中的配置信息。 例如,Android/iOS中,我们需要用ImageView/UIImageView来显示logo。...可以通过将Text包装在StatefulWidget中并在点击按钮更新它来实现,: import 'package:flutter/material.dart'; void main() {...例如,当点击一个FloatingActionButton,如何在两个Widget之间切换: import 'package:flutter/material.dart'; void main() {...要了解如何在Flutter中实现签名Painter,可参阅CollinStackOverflow的答案。 ?

10.9K10

Flutter 的 Drawer 侧边栏以及侧边栏布局

iOS原生开发中,实现抽屉视图还是比较麻烦的,有时还需要借助第三方组件来实现。但是Flutter中,我们利用Drawer组件就可以很轻松实现抽屉视图。...2,配置了Scaffold的drawer属性或者endDrawer属性之后,flutter会自动帮我们顶部导航栏的左侧或者右侧加上一个按钮,如下图所示: ?...9,当点击抽屉视图中的某个组件来跳转到另外一个页面,然后从这个页面返回的时候,默认情况下,抽屉视图是不会消失的,也就是说,再返回回来的时候,抽屉视图效果还是存在的。...那么,当点击抽屉视图中的某个组件来跳转到另外一个页面,然后从这个页面返回的时候,如何让抽屉视图消失呢?...我们页面跳转之前通过 Navigator.pop(context); 这行代码来实现“隐藏抽屉视图”的功能。 以上。

5.3K20
领券