老孟导读:Navigator组件使用的频率不是很高,但在一些场景下非常适用,比如局部表单多页填写.底部导航一直存在,每个tab各自导航场景. Navigator 是管理路由的控件,通常情况下直接使用Navigator.of(context)的方法来跳转页面,之所以可以直接使用Navigator.of(context)是因为在WidgetsApp中使用了此控件,应用程序的根控件通常是MaterialApp,MaterialApp包含WidgetsApp,所以可以直接使用Navigator的相关属性

文本控件 Text 支持两种类型的文本展示,一个是默认的展示单一样式文本 Text,另一个是支持多种混合样式的富文本 Text.rich. 单一样式文本 Text 单一样式文本 Text 的初始化,是要传入需要展示的字符串.而这个字符串的具体展示效果,受构造函数中的其他参数控制.这些参数大致可以分为两类: 控制整体文本布局的参数,如文本对齐方式 textAlign.文本排版方向 textDirection,文本显示最大行数 maxLines.文本截断规则 overflow 等等,这些都是构造函数

Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单.下面作一个拖拽的案例. Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片.用起来非常的灵活. 参数说明: data: 是要传递的参数,在DragTarget里,会接受到这个参数.当然要在拖拽控件推拽到DragTarget的时候. child:在这里放置你要推拽的元素,可以是容器,也可以是图片和文字. feedback: 常用于设

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Draggable系列组件可以让我们拖动组件. Draggable Draggable组件有2个必须填写的参数,child参数是子控件,feedback参数是拖动时跟随移动的组件,用法如下: Draggable( child: Container( height: 100, width: 100, alignment: Alignment.center,

老孟导读:快乐的51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件在以后的项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起,具统一的滚动效果. CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件.使用场景: ListView和GridView相互嵌套场景,ListView嵌套GridView时,需要给GridView指定高度,但我们希望高度随内容而变化(

老孟导读:Flutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件: Chip InputChip ChoiceChip FilterChip ActionChip 如果你想自定义标签类控件时通常使用此控件. RawChip可以通过设置onSelected被选中,设置onDeleted被删除

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Form.FormField.TextFormField是表单相关控件,类似于H5中form. FormField FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField. TextFormField TextFormField继承自FormField,是一个

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度. RaisedButton RaisedButton是一个material风格"凸起"的按钮,基本用法: RaisedButton( child: Text('Button'), onPressed: (){ }, ) 效果: onPresse

今天展示一下基础控件的学习开发,希望对大家有所帮助,转载请说明~ 首先延续之前的首页界面展示,几个跳转navigator的使用,然后是各功能模块的功能使用 一.text展示 使用按钮,进行文字的添加与减少,代码如下: <!--.wxml--><view class="viewTitle">    <text class="titleName">text展示</text></view><view cla

本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Padding.Align.Center详解 Flutter 布局(三)- FittedBox.AspectRatio.ConstrainedBox详解 Flutter 布局(四)- Baseline.FractionallySizedBox.Intrin

Flutter学习指南:UI布局和控件 - IT程序猿  https://www.itcodemonkey.com/article/11041.html

ListView即滚动列表控件,能将子控件组成可滚动的列表.当你需要排列的子控件超出容器大小,就需要用到滚动块. import 'package:flutter/material.dart'; class ListDemo extends StatelessWidget{ @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("滚动布局&quo

AppBar 和 SliverAppBar 是纸墨设计中的 App Bar,也就是 Android 中的 Toolbar,关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容. AppBar 和 SliverAppBar 都是继承至 StatefulWidget 类,都代表 Toobar,二则的区别在于 AppBar 位置的固定的应用最上面的:而 SliverAppBar 是可以跟随内容滚动的.他们的主要属性如下: leading:在标题前面显示的一个控件,在首页通常显示应用

Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片.用起来非常的灵活. 参数说明: data: 是要传递的参数,在DragTarget里,会接受到这个参数.当然要在拖拽控件推拽到DragTarget的时候. child:在这里放置你要推拽的元素,可以是容器,也可以是图片和文字. feedback: 常用于设置推拽元素时的样子,在案例中当推拽的时候,我们把它的颜色透明度变成了50%.当然你还可以

flutter showDatePicker showTimePicker显示中文日期 1.配置flutter_localizations依赖 找到pubspec.yaml配置flutter_localizations dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 2.导入国际化的包 flutter_localizations import 'package:flutter_localization

轻提示的效果在应用中是少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip. 轻量级操作提示 其实Flutter中有很多提示控件,比如Dialog.Snackbar和BottomSheet这些操作都是比较重量级的,存在屏幕上的时间较长或者会直接打断用户的操作. 当然并不是说这些控件不好,根据需求的不同,要有多种选择,所以才会给大家讲一下轻量级操作提示Tooltip. Tooltip是继承于StatefulWidget的一个Widget,它并不需要调出方法,当用户长按被Tool

开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 Flutter存在着两大布局体系(就目前分析),一个是Box布局,还有另外一个就是Sliver布局:但是Sliver布局明显比Box会更加复杂,这真是一个坎,那么为啥说Sliver更加复杂尼,请看一下对比:首先是Box布局,主要看输入的BoxConstraints(约束)和输出Size(尺寸) cl

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DatePicker Flutter并没有DatePicker这个控件,需要使用showDatePicker方法弹出日期选择控件,基本用法如下: RaisedButton( onPressed: () async { var result = await showDatePicker( context: context, initialDate: Date

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下: var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内,否则会抛出异常,MaterialApp和WidgetsApp都引入了MediaQuery,并且随着屏

老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类: class User { User(this.name, this.age, this.sex); final String name; final int age; final String sex; } 生成数据: List<Us

如需转载,请注明出处:Flutter学习笔记(38)--自定义控件之组合控件 在开始之前想先写点其他的,emm...就是今天在学习到自定义控件的时候,由于自定义控件这块一直是我的短板,无论是Android原生开发还是Flutter,对我来说都是致命伤,内心深处不知道为什么就是很抵触...学着学着就突然感觉特烦躁, 不知道自己现在学这些有什么用,有什么意义,工作中的项目也用不上,年前换工作的时候,去快手面过Flutter的岗位,很遗憾二面没有通过,我自己也不死心,想好好准备准备再去试一下,也算是自