在 Flutter 中使用 NavigationRail 和 BottomNavigationBar “作者：坚果 华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA...本文将向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中创建自适应布局。我们将浏览一下这个概念，然后通过一个完整的例子来在实践中应用这个概念。...它通常包含多个视图，让用户可以轻松地在不同视图之间切换。 BottomNavigationBar小部件用于创建非常适合智能手机的底部标签栏。它由多个选项卡组成，让用户可以轻松地在视图之间导航。...我们可以使用NavigationRail和BottomNavigationBar来构建现代自适应布局。...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记 您已经学习了一种使用 NavigationRail 和 BottomNavigationBar
= null), super(key: key); 二、底部导航栏整体架构 ---- 通过设置 Scaffold 组件的 bottomNavigationBar 字段 , 为其设置一个 BottomNavigationBar..., 同一时间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单..., 设置一个 BottomNavigationBar 组件 ; BottomNavigationBar 组件中可设置 int currentIndex 当前的索引 , ValueChanged?...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , 在 BottomNavigationBarType?...onTap 字段设置点击事件 , 传入的参数是点击的底部导航栏索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key?
以下是 Flutter 文本解读 系列的其他文章： 《Flutter 文本解读 1 | 从源码认识 Text 组件》 《Flutter 文本解读 2 | Text 是如何画出来的》 《Flutter 文本解读...3 | Text 组件使用介绍 》 《Flutter 文本解读 4 | TextStyle 文字样式解读 》 《Flutter 文本解读 5 | RichText 富文本的使用 (上)》 ---- 一...，使用抽象 SpanBean ，在列表添加对象时使用对应的实现。...这样便可以实现下面的将文本中的链接高亮。...本文就到这里，下一篇来看一下，在 Flutter 中如何实现一个代码高亮显示的富文本。
文本控件 Flutter中，Text支持两种类型的文本展示，一个是默认的展示单一样式的文本 Text，另一个是支持多种混合样式的富文本 Text.rich。...面对这样的需求，在Android中，我们使用 SpannableString来实现；在iOS中，我们使用NSAttributedString来实现；而在Flutter中国也有类似的概念，即TextSpan...接下来，我们再来看看Flutter中的图片控件Image。 图片 使用Image，可以让我们向用户展示一张图片。...这，和Android中的ImageView、iOS中的UIImageView的属性都是类似的，我在Flutter的图片组件这篇文章中有做详细介绍。...但是在自定义控件样式上，Flutter的这些经典控件提供了强大而简介的扩展能力，使得我们可以快速开发出功能复杂、样式丰富的页面。 以上。
组件是底部导航栏 , 用于设置给 Scaffold 组件的 bottomNavigationBar 字段 ; 下面是 BottomNavigationBar 组件的构造函数源码 , 该构造函数的可选参数列表就是可以设置的字段属性...的 items 字段值 , 可以给该 items 字段设置多个 BottomNavigationBarItem 组件 ; BottomNavigationBarItem 组件常用设置 : 默认状态图标...回调事件 , 传入一个匿名回调函数 , 在该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar...底部导航栏切换选项卡界面 ---- BottomNavigationBar 底部导航栏的 onTap 回调方法中 , 设置当前选中的选项卡索引 , 根据该索引值修改 Scaffold 组件的 body...flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab : https://codelabs.flutter-io.cn
封装的带有 AppBar , 底部导航栏 BottomNavigationBar , 侧边栏 的组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; AppBar : 顶部导航栏 ; BottomNavigationBar...: 底部导航栏 ; RefreshIndicator : 刷新指示器 ; Image : 图片组件 ; TextField : 输入框组件 ; PageView : 可滚动翻页的组件 , 类似于 Android...textStyle 对象 Text('Container 中的 Text 文本组件示例', style: textStyle,), // Icon...tittle 字段就是标题设置 , theme 字段设置的是主题 , home 字段设置的是界面的主要子组件 ; 在上述示例中 下面的代码是 MaterialApp 构造函数源码 , 其中构造函数的可选参数就是可设置的选项...floatingActionButton ; 底部导航栏设置 : bottomNavigationBar ; 侧边栏设置 : drawer ; Scaffold 组件构造函数源码 : 构造函数中的可选参数就是组件的可设置选项
Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是，它不允许您拖动按钮。如果你想让它可拖动怎么办。...创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。我们需要处理的第一件事是使按钮可跟随指针拖动的能力。可以使用的小部件之一是Listener，它能够检测指针移动事件并提供移动细节。...所以，我们可以检查内部onPointerUpcallback 仅onPressed在值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮的类。...一个简单的圆形小部件作为child参数传递，这意味着它成为可拖动的按钮。您可以为按钮使用任何小部件，包括 Flutter 的FloatingActionButton小部件。...中创建可拖动的浮动操作按钮。
组件是悬浮按钮组件 ; FloatingActionButton 组件常用设置 : 点击事件 : onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码 : 在构造函数的可选参数中...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(...child 字段设置 , 这里设置了一个 ListView 列表组件 , 然后设置了下拉刷新回调方法 , 在 onRefresh 字段设置 ; // 刷新指示器组件 RefreshIndicator...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab
; 设置垂直间距 : runSpacing 字段 ; 设置布局中的子组件 : children 字段 ; // 可自动换行的水平线性布局 Wrap( // 设置水平边距 spacing: 间距值...style: TextStyle(color: Colors.yellow), ), ), ), ], ), // 空行 执行效果 : 第一个组件是 Row 中没有使用...Expanded 组件的情况 ; 第二个组件是 Row 中使用了 Expanded 组件的情况 ; 三、完整代码示例 ---- 完整代码示例 : import 'package:flutter/material.dart...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab
= null), super(key: key, child: child); } Opacity 组件用法 : 设置透明度 : 在 opacity 字段设置透明度值 , 取值范围 0 ~...= null), super(key: key, child: child); } ClipRRect 组件使用方法 : 设置圆角 : borderRadius 字段设置四个顶点的圆角半径...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab
组件类似 , Wrap 组件可以换行 ; Flow : 不常用 ; ParentDataWidget : Positioned : 用于固定组件位置的组件 ; Flexible : 用于约束组件在父容器中展开大小的组件..., 设置其对应的 children: [] 即可 , 在中括号 [] 中是多个组件的集合 , 使用逗号隔开 ; 示例代码 : // 水平方向排列的线性布局 Row( children: <Widget...: 在 width 和 height 字段设置组件的宽高属性 , 在 child 字段设置要设置大小的组件 ; // 使用 SizedBox 组件约束布局大小 SizedBox( width: 宽度像素值...= null), super(key: key, child: child); } ClipOval 组件使用方法 : 将要裁剪的组件设置到该 ClipOval 对应的 child 字段中...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(
children 字段设置若干 Widget 组件 , 最后一个组件在最顶端显示 , 覆盖前面的组件 ; 代码示例 : // 帧布局 Stack( children: [ Image.network...; 设置组件高度 : height 字段 ; 设置组件距离左侧距离 : left 字段 ; 设置组件距离顶部距离 : top 字段 ; 设置组件距离右侧距离 : right 字段 ; 设置组件距离底部距离...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab
应用程序结构和导航 按钮 输入和选择 对话框，弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...底部导航栏通常与Scaffold结合使用，在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...输入和选择 TextField 触摸文本字段将放置光标并显示键盘。 TextField部件实现了这个组件。 ? Checkbox 复选框允许用户从一组中选择多个选项。...芯片代表小块中的复杂实体，如联系人。 ? Tooltip 工具提示提供的文本标签可帮助解释按钮或其他用户界面操作的功能。
UI 显示 ; 设置点击方法 : BottomNavigationBar 的 onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击的按钮索引 , 在该方法中主要操作当前的 currentIndex...: onPageChanged 参数设置滑动回调事件 , 传入 index 索引值 , 在该事件中 , 调用 setState 方法 , 更新底部导航栏 BottomNavigationBar 的当前索引值...私有变量 , 即可控制 BottomNavigationBar 的选中状态 ; BottomNavigationBar 主动设置选中状态 : 在 BottomNavigationBar 的 onTap...BottomNavigationBar 底部导航栏中点击导航按钮 , 切换页面 , 使用 PageView 的 PageController 的 jumpToPage 方法进行页面跳转 ; PageView...主动设置选中状态 : 滑动 PageView 界面 , 会回调 PageView 中的 onPageChanged 方法 , 在此处调用 setState 方法 , 在该方法中设置 _currentIndex
= null), super(key: key, child: child); } PhysicalModel 组件用法 : 设置裁剪形状 : 默认矩形 , 可以在 shape 字段设置圆形...; 设置背景颜色 : color 字段设置背景颜色 , Color 类型 ; 设置圆角半径 : borderRadius 字段设置 , BorderRadius 类型 ; 设置裁剪行为 : clipBehavior...字段设置裁剪行为 , Clip 枚举类型 , 无/有锯齿/抗锯齿/抗锯齿+保存图层 ; 设置被裁剪的组件 : child 字段设置被裁减的组件 , Widget 类型 ; PhysicalModel(...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(
这个平台需要能够收集、分析和服务来自车队中每辆车的70多种远程信息处理和传感器数据馈送，包括测量发动机性能、冷却液温度、卡车速度和制动器磨损的数据。...数据是从经过高度修改的高性能Corvette（请参见图1）中提取的，显示了从外部源加载数据，使用Apache NiFi 对其进行格式化，通过Apache Kafka 将其推送到流源以及使用以下方法存储数据的步骤...并使用Apache HBase 进行有关的其他分析。...在此示例中，没有任何订户。但是，这是一个重要的概念，值得对如何设置进行演示。 • 最终设置是HBase，这是一个可伸缩的、面向列的操作数据库，可提供实时的读/写访问。...现在，使用NiFi和Kafka将传感器数据格式化并将其流式传输到HBase中，无论数据集增长多少，都可以执行高级数据工程和处理。 1.
简介 什么是可扩展的应用程序呢？可扩展的意思是不需要修改原始代码，就可以扩展应用程序的功能。我们将应用程序做成插件或者模块。 这样可以在不修改原应用的基础上，对系统功能进行升级或者定制化。...本文将会向大家介绍如何通过java中的SPI机制实现这种可扩展的应用程序。 SPI简介 SPI的全称是Java Service Provider Interface。...为了更好的展示扩展应用的实际使用，我们分别创建4个模块。在实际应用中，只需要将这些jar包加入应用程序的classpath即可。...证明系统扩展成功。 SPI在JPMS模块化系统下的实现 上面我们讲的是基本的操作，考虑一下，如果是在JDK9之后，引入了JPMS模块化系统之后，应该怎么使用SPI呢？...总结 本文介绍了SPI在模块化和非模块化系统中的应用。
; 一般使用 Container 封装复杂的组件 ; 代码示例 : 下面的代码就是 PageView 中设置了三个滑动切换的组件 , 都是 Container 组件 , 每个 Container 都设置的居中方式...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab
在Flutter中，开发者可以使用内置的BottomNavigationBar组件轻松创建和定制底部导航栏，同时结合其他Flutter组件和功能实现更丰富的导航体验。...创建底部导航栏的基本结构 底部导航栏在Flutter中的创建可以通过两个主要的组件来实现：BottomNavigationBar和BottomNavigationBarItem。...在Flutter中，实现底部导航栏与页面切换通常有两种常见的方式：使用IndexedStack和利用PageView。本节将分别介绍这两种方式的实现方法。...Flutter提供了多种状态管理方法，其中包括使用Provider和Bloc进行状态管理。在本节中，我们将介绍如何利用这两种方法来实现底部导航栏的状态管理。...6.2 使用Bloc进行状态管理 Bloc是另一个常用的Flutter状态管理库，它基于流（Stream）和事件（Event）的模式来管理应用程序的状态，并提供了一种清晰、可维护的方式来组织和处理复杂的业务逻辑
♣ 题目部分 在Oracle中，文本型字段直方图示例2个。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
