我在之前的文章文本、图片和按钮在Flutter中怎么用中，简单介绍过按钮组件，本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。...在Flutter中，有很多的按钮组件，常见的有：FlatButton、RaisedButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton...首先来看一下按钮组件的属性： onPressed，必填参数，按下按钮时触发的回调，接收一个方法，传null值表示按钮禁用，会显示禁用相关样式 child，表示按钮展示状态的Widget，一般为一个文本组件...上述例子我都是以RaisedButton为例来演示的，实际上，RaisedButton、FlatButton和OutlineButton这三者的使用都是完全一样的。...6，在点击悬浮按钮的时候，我们可以通过调整 _tabbarIndex 的值来切换页面。
禁用状态下背景颜色 highlightColor 高亮颜色，按下时的颜色 splashColor 水波纹颜色，按下松开会有水波纹效果 以textColor为例，用法如下： RaisedButton(...primary ：字体颜色依赖于ThemeData.primaryColor 这3个值在MaterialApp控件中进行全局设置，设置如下： MaterialApp( title: 'Flutter...和hover相关的属性是指鼠标悬停时的状态，移动端没有效果，focus相关的属性为获取焦点时的状态。...设置其阴影值、内边距和弹出菜单的背景颜色： PopupMenuButton( elevation: 5, padding: EdgeInsets.all(5), color:...甚至可以设置点击水波纹颜色（splashColor）和按下时的高亮颜色（highlightColor）： ToggleButtons( splashColor: Colors.purple,
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下： 1. RaisedButton ：凸起的按钮； 2. FlatButton ：扁平化的按钮； 3....FloatingActionButton：浮动按钮； 按钮组件常见的属性： 1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式； 2....值的类型为Widget； 3. textColor 文本颜色。值的类型为Colors； 4. color 按钮的颜色。值的类型为Colors； 5. disabledColor 按钮禁用时的颜色。...值的类型为Colors； 6. disabledTextColor 按钮禁用时的文本颜色。值的类型为Colors； 7. splashColor 点击按钮时水波纹的颜色。...值的类型为Colors； 8. highlightColor 长按按钮后按钮的颜色。值的类型为Colors； 9. elevation 阴影的范围。
3个值在MaterialApp控件中进行全局设置，设置如下： MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor...，代码如下： RaisedButton( shape: CircleBorder(), ... ) 效果如下： [1240] 和hover相关的属性是指鼠标悬停时的状态，移动端没有效果，focus...创建的组件，它不使用当前的系统主题和按钮主题，用于自定义按钮或者合并现有的样式，而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题，相关属性可以参考...，用法如下： PopupMenuButton( tooltip: 'PopupMenuButton', ... ) 效果如下： [1240] 设置其阴影值、内边距和弹出菜单的背景颜色...（splashColor）和按下时的高亮颜色（highlightColor）： ToggleButtons( splashColor: Colors.purple, highlightColor
终于把基本的组件扯完了,真的是多如牛毛。现在让我们来看一下控件如何实现交互 最后会实现一个简单的有点笔触效果的画布,来说明如何使用手势交互。...1.从RaisedButton看事件交互 Flutter的组件中有很多是有点击事件的，比如按钮，这里简单翻一下源码。...,根据名字来看应该都不难理解 事件名 简介 回调对象 简介 onTap 单击 无 无 onTapDown 按下 TapDownDetails 按下时触点信息 onTapUp 抬起 TapUpDetails...在使用上和前面的拖动时间基本一致,这里就不再赘述。...:Flutter中的手势交互,主要是移动相关 1.一条线是点的集合,绘板需要画n条线，所以是点的集合的集合 _lines 2.组件为有状态组件,_lines为状态量,在移动时将点加入当前所画的线
默认值为 ThemeData.primaryIconTheme centerTitle 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。...Navigator可以通过push和pop route以实现页面切换。 在Flutter中，导航器管理应用程序的路由栈。将路由推入（push）到导航器的栈中，将会显示更新为该路由页面。...可以从Native层调用flutter层的dart代码，也可以在flutter层调用Native的代码，而作为通讯桥梁就是MethodChannel，这个类在初始化的时候需要注册一个渠道值。...这个值必须是唯一的，并且在使用到的Native层和Flutter层互相对应。...中如何使用原生控件或组件 Flutter代码通常涉及构建相当深的树状数据结构，例如在一个build方法中。
在前面的文章中我们学习了Flutter中事件的处理，包括组件的单击、双击、长按、滑动等。想必大家多其已经有了一定的认识。 那么，这节我们主要介绍下Flutter中输入和选择组件的用法。...当用户输入 用户名flyou，密码是admin时，提示登录成功，当用户名密码不是此值时提示登录失败。...this.value,//当前值，是否选中 @required this.onChanged,//选中变更监听 this.activeColor,//选中时的颜色 }) 直接看代码看用法： import...66,每当用户滑动滑块时根据用户的滑动改变滑块的位置。...RadioListTile和SwitchListTile的用法基本相同，这里就不在具体介绍了，大家可以在下面试一下如何使用。
新的滑块在设计时考虑到了更好的可访问性：轨道更高，滑块带有阴影，并且值指示器具有新的形状和改进的文本缩放支持。...onChanged：滑块值改变时回调。 ? 看看 Flutter 1.20 版本以前的样式（我的珍藏）： ? 明显的感觉就是滑块轨道变粗了，滑块变的更有立体感（加了阴影）了。...自定义滑块 激活的颜色 和 未激活的颜色： Slider( activeColor: Colors.red, inactiveColor: Colors.blue, value: _sliderValue...如何在 Flutter 1.20 版本使用以前的标签样式呢？...标题 选定的日期范围 切换到输入模式 月和年标签 当前时间 开始时间 选中时间范围 结束时间 国际化 国际化都是一个套路，下面以 showDatePicker 为例： 在 pubspec.yaml 中引入
相信大家当初在从 Flutter 1 切换到 Flutter 2 的时候，应该都有过这样一个疑问： 为什么 FlatButton 和 RaisedButton 会被弃用替换成 TextButton 和...首先我们看看 MaterialStateProperty ，在 MaterialStateProperty 体系里有一个 MaterialState 枚举，它主要包含了： disabled：当控件或元素不能交互性时...hovered：鼠标交互悬停时 focused： 在键盘交互中突出显示 selected：例如 check box 的选定状态 pressed：通过鼠标、键盘或者触摸等方法发起的轻击或点击 dragged...withOpacity(0.38) 变化颜色； _TextButtonDefaultOverlay: 用于处理 hovered 、 focused 和 pressed ，通过 primary.withOpacity...控件进行 MaterialState 的 UI 响应时，也是遵循了 Material Design 的设计规范，比如 Hover 时 primary.withOpacity(0.04); ，所以不管在
如何实现Android平台的wrap_content 和match_parent 你可以按照如下方式实现： 1、Width = Wrap_content Height=Wrap_content： Wrap..._tabController, children: [ _buildTabView1(), _buildTabView2(), ], ) 此时切换tab时，页面会重建...如何移除debug模式下右上角“DEBUG”标识 MaterialApp( debugShowCheckedModeBanner: false ) 如何使用16进制的颜色值 下面的用法是无法显示颜色的...： Color(0xb74093) 因为Color的构造函数是ARGB，所以需要加上透明度，正确用法： Color(0xFFb74093) 如何给TextField设置初始值 class _FooState...的问题，但在开发中经常遇到，在Android Pie版本及以上和IOS 系统上默认禁止访问http，主要是为了安全考虑。
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认，以避免用户的误操作...根据设计的不同，我们可以选择Material风格的AlertDialog或者Cupertino（ios）风格的CupertinoAlertDialog， Material风格基础用法如下： RaisedButton...Cupertino（ios）风格基础用法如下： RaisedButton( child: Text('切换'), onPressed: () { showCupertinoDialog(...: false, ) AlertDialog的属性相对比较丰富，可以设置title样式、content样式、背景颜色、阴影值，设置是形状： AlertDialog( title: Text...用户点击“取消”或者“确定”按钮后退出对话框，App需要知道知道用户选择了哪个选项，用法如下： RaisedButton( child: Text('切换'), onPressed: () async
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下： 1. RaisedButton 凸起的按钮； 2. FlatButton 扁平化的按钮； 3....FloatingActionButton 浮动按钮； 按钮组件常见的属性： 1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式； 2.... child 子组件； 3. textColor 文本颜色； 4. color 按钮的颜色； 5. disabledColor 按钮禁用时的颜色； 6. disabledTextColor 按钮禁用时的文本颜色...； 7. splashColor 点击按钮时水波纹的颜色； 8. highlightColor 长按按钮后按钮的颜色； 9. elevation 阴影的范围； 10. padding 内边距； 11....，以下是代码示例： import "package:flutter/material.dart"; // 标签切换页 class Tabs extends StatefulWidget {
AndroidX，于是切换至较新的 'v1.12.13-hotfixes' 分支，Packages get 检验，可以正常运行； flutter_boost: git: url: 'https...Code 案例 至此，Flutter 和 FlutterBoost 的集成已基本完成，接下来是两端映射与跳转方面的学习，和尚建议刚开始时可以将官网的代码复制拷贝到项目中，先跑通项目更直观的感受...Flutter -> Flutter 跳转 Flutter 之间的跳转可以通过默认的 Navigator 方式，也可以通过 FlutterBoost.singleton.open 方式进行页面跳转；注意跳转的页面均需在...Flutter -> Android 跳转 Flutter 到 Native 的跳转需要根据不同映射的 url 单独判断；其中接收参数通过 openPageByUrl 的 params 获取；若由 Flutter...到 Native 需要返回值，注意页面跳转时使用 startActivityForResult 方式，且关闭 Native 时传参的 KEY 为固定的 IFlutterViewContainer.RESULT_KEY
老孟导读：上一篇文章讲解了 Android 和 iOS 的文件目录系统，此篇文章讲解如何使用 SQLite 保存大量复杂数据数据。...，如果本地没有保存数据，则需要通过网络获取数据，在返回数据之前，用户看到的是空白页面，而如果本地保存了部分新闻，则显示这部分数据，等待最新的数据返回时在刷新即可，对用户体验来说，明显第二种体验更佳。...那是否需要先去学习数据库和 SQL 语句相关知识？...我觉得没有必要，应用程序使用的数据库和 SQL 语句相关知识都是非常基础的，比如打开数据库、创建表、SQL 查询语句、更新语句、删除语句等，这些都是固定的格式，固定语句记住即可。...添加依赖 SQLite 并不是 Flutter 系统自带的，而是一个第三方插件，在项目的 pubspec.yaml 文件中添加依赖： dependencies: sqflite: ^1.3.1
---- 1、ttf 字体文件 字体资源文件 : ttf 格式的字体资源 ; Flutter 应用字体资源文件 : 在 Flutter 应用根目录下创建 fonts 目录 , 将下载的 ttf 字体放资源文件在该...RubikMonoOne-Regular.ttf 放在根目录下的 fonts 目录下 ; 3、获取字体 在 pubspec.yaml 配置文件中配置完字体资源后 , 点击 " Pub get " 按钮...code 0 4、全局使用字体 全局应用字体 : 在 MaterialApp 根节点的 theme 字段值的 ThemeData 组件中的 fontFamily 字段设置字体 , 这里设置在 pubspec.yaml...配置文件中配置的 family 标签下的值 “RubikMonoOne” ; 字体配置 : fonts: - family: RubikMonoOne fonts: -...// 设置主题 theme: ThemeData( // 配置字体 fontFamily: "RubikMonoOne", // 配置主题颜色
Flutter也有类似概念TextSpan TextSpan定义一个字符串片段该如何控制其展示样式，而将这些有独立展示样式的字符串组装在一起，则能支持混合样式的富文本展示。...5 FAQ 阅读Flutter SDK中Text、Image、FadeInImage，以及按钮控件FloatingActionButton、FlatButton与RaisedButton的源码，在build...在阅读Flutter SDK中Text、Image、FadeInImage、FloatingActionButton、FlatButton和RaisedButton的源码时，可以发现它们的build函数中都有一个内部真正承载其视觉功能的控件...对于RaisedButton控件，其内部真正承载其视觉功能的控件为Material和InkResponse。 这些控件都是Flutter框架中提供的基础控件，用于实现各种不同的视觉效果。...在这些控件的build函数中，会根据不同的属性值来创建这些基础控件，并将它们组合在一起，从而实现所需的视觉效果。
返回上一级路由 Navigator.of(context).pop(); 在页面中调用这个方法可以返回进入当前页面的上一级页面。 2....如果在A页面也是使用的此命令跳转到B页面，那么在C页面中返回时会返回A页面的上一级页面。 3....; // 引入子页面 import 'tabs/Home.dart'; import 'tabs/Category.dart'; import 'tabs/Setting.dart'; // 标签切换页...}, // 图标大小 iconSize: 30.0, // 选中图标的颜色..."), // 点击事件 onPressed: () { // 跳转路由传值
Flutter的路由管理和导航借鉴了前端和客户端中的设计思路，提供了Route和Navigator对路由进行统一管理。...在Flutter开发中，根据是否需要提前注册路由标识符，路由管理可以分为基本路由和命名路由两种。...9.1.2 基本路由 基本路由无需提前注册，在页面切换时需要手动构造页面的实例，使用起来相对简单灵活，适用于应用中页面不多的场景。...MaterialPageRoute是Flutter提供的路由模板，是PageRoute的子类，定义了路由创建及切换时过渡动画的相关接口和属性，并自带页面切换动画。...如果需要返回上一个页面时回传参数，可以在使用push()打开目标页面时使用then()监听目标页面的返回值。
其实，Flutter的路由管理也借鉴了这两种设计思路。那么，今天我们就来看看，如何在一个Flutter应用中管理不同页面的命名和过渡。...而根据是否需要提前注册页面标识符，Flutter 中的路由管理可以分为两种方式： 基本路由。无需提前注册，在页面切换时需要自己构造页面实例。 命名路由。...基本路由 在Flutter中，基本路由的使用方法和iOS/Android打开新页面的方式非常类似。...在注册路由表时，Flutter提供了 UnknownRoute 属性，我们可以对位置的路由标识符进行统一的页面跳转处理。 下面的代码演示了如何注册错误路由处理。...为了精细化控制路由切换，Flutter提供了页面打开与页面关闭的参数机制，我们可以在页面创建和目标页面关闭时，取出相应的参数。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
