如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上所有的应用程序都会有用户名.密码输入框,搜索框等等,前面我们有写过一篇基于Form表单的输入功能,今天来看一下TextField文本框组件,文本输入是最常见的一种交互方式,TextField组件就是用来做文本输入的组件.注意这个要和Text组件区分开来,Text组件主要用于显示文本,并不能接受输入文…

Flutter AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽 度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域. 如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先 适应布局限制条件,而忽略所设置的比率. 属性 说明 aspectRatio 宽高比,最终可能不会根据…

一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域.如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率.   aspectRatio   宽高比,最终可能不会根据这个值去布局,具体则要…

/* Flutter AspectRatio.Cart卡片组件: AspectRatio的作用是根据设置调整子元素child的宽高比. AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展,widget的高度是由宽度和比率决定的. 类似于BoxFit中的contain,按照固定比率去尽量占满区域. 如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio最终将会去优先适应布局限制条件,而忽略所设置的比率. */ main.dart import 'package:f…

闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 中的创建一个闪视卡片组件.同期新增和修改的章节还有:使用VS Code在Chrome中调试Ionic 2 在Ionic 2 Native中使用Cordova插件 Ionic 2中使用百度地图和Geolocation 没有苹果电脑打包iOS平台的 Ionic 2程序…

Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.FloatingActionButton 等.  aisedButton :凸起的按钮,其实就是 Material Design 风格的 Button FlatButton :扁平化的按钮 OutlineButton:线框按钮 IconButton :图标按钮 ButtonBar:按钮组 FloatingAct…

列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 垂直图文列表 水平列表 动态列表 矩阵式列表 列表参数 在flutter中,类别组件 ListView 包含以下可选参数: scrollDirection:Axis.horizontal 水平列表Axis.vertical 垂直列表 padding:内边距 resolve:组件反向排序 child…

一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是通用的. 概述Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.FloatingActionButton 等. RaisedButton :凸起的按钮,其实就是…

在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到底如果学习,真的需要学习 350 多个组件? 在经济学中有一个著名的 二八定律 二八定律是意大利经济学家帕累托发现的.帕累托认为任何一组东西中最重要的只占其中一小部分约占20%,其余80%尽管是多数,却是次要的. 而我们学习 Flutter 也适用于二八定律,大部分组件是平时很少用到的,因此作为初学…

一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; class CardDemo extends StatefulWidget { @override _CardDemoState createState() => _CardDemoState(); } class _CardDemoState extends State<CardDemo>…

AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域. 如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率.   AspectRatio组件常用的属性: 属性 说明 aspectRatio 宽高比,最终可能不会根据这个值…

将信息聚合在卡片容器中展示. 基础用法 包含标题,内容和操作. Card 组件包括header和body部分,header部分需要有显式具名 slot 分发,同时也是可选的. <el-card class="box-card"> <div slot="header" class="clearfix"> <span>卡片名称</span> <el-button style="float…

引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式以及在此基础之上拓展的双端嵌入Native组件的解决方案. 1. 使用教程 1.1. DemoRun 嵌入地图这一场景可能在很多App中都会存在,但是现在的地图SDK都没有提供Flutter的库,而自己开发一套地图显然不太现实.这种场景下,使用混合栈的形式是一个比较好的选择.我们可以直接在Nativ…

一,概述 AppBar 显示在app的顶部.AppBar包含5大部分,如下图: 二,构造函数及参数含义 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 this.automaticallyImplyLeading = true, this.title, //Toolbar 中主要内容,通常显示为当前界面的标题文字 this.actions, //一个 Widget 列表,代表 T…

import 'package:flutter/material.dart'; import './model/post.dart'; class SliverDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( // title: Text('N…

在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变.通俗的讲:如果我 们想改变页面中的数据的话这个时候就需要用到 StatefulWidget import 'package:flutter/material.dart'; void main() => run…

Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.FloatingActionButton 等. RaisedButton :凸起的按钮,其实就是 Material Design 风格的 Button FlatButton :扁平化的按钮 OutlineButton:线框按钮 IconButton :图标按钮 ButtonBar:按钮组   Flutter按钮…

一.Text文本组件(单一格式的文本) 是具有单一风格的文本字符串,可以跨多行显示,也可全部显示在同一行中,具体显示样子,取决于布局约束. 常用属性: 1.overflow : TextOverflow.values 处理文本溢出,可选值有:   clip:剪切溢出的文本: ellipsis:用省略号代替溢出部分文本: fade: 是将溢出的文本淡入透明: visible:显示溢出文本. 若不设置overfl属性,则默认为clip属性,即剪切溢出的文本. 2.textAlign:TextAlig…

1.添加依赖 dependencies: flutter_webview_plugin: ^+ 2.导入库 import 'import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; //导入前需要配置 3.属性 const WebviewScaffold({ Key key, this.appBar, @required this.url, this.headers,// this.withJavascript,//…

一,概述 RefreshIndicator是Flutter基于Material设计语言内置的控件,集合了下拉手势.加载指示器和刷新操作一体,可玩性比FutureBuilder差了一大截,不过大家也用过Material设计语言的其他控件,视觉效果也不赖的. 要实现拉刷新列表的功能仅仅依靠RefreshIndicator还不行,我们还需要ScrollController对ListView的移动偏移量进行监控. 二,两个重要的组件 RefreshIndicator 构造函数 /** * 下拉刷新组件…

一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直接或间接包含一个Scrollable widget,因此它们包括一些共同的属性,我们在此统一介绍一下: Scrollable({ ... this.axisDirection = AxisDirection.down, this.controller, this.physics, @required…

一,概述 TabBar,是材料设计(Material design)中很常用的一种横向标签页.在Android原生开发中,我们常用ViewPage或者一些常用的标签页开源库,来实现并行界面的横向滑动展示,在iOS原生开发中我们可以基于UICollectionView/UIButton来封装实现这一功能,在Flutter的世界中,TabBar是被定义在Material Component中,所以他的使用需要在MaterialApp中.通常,我们会在AppBar的底部部分结合TabBarView来使…

一,概述 表单时一个包含表单元素的区域. 表单元素允许用户输入内容,比如文本域,下拉列表,单选框,复选框等.常见的应用场景有:登录,注册,输入信息等. 表单里有两个重要的组件: Form:用来做整个表单提交使用 TextFormField:用来做用户输入.  正式向服务器提交数据前,都会对各个输入框数据进行合法性校验.但对每个TextField都分别校验很麻烦. 如果想清除一组TextfFiled的内容,一个个清除也很麻烦.所以,Flutter提供了一个Form widget,可以对输入框进行分…

一,概述 数据量很大的时用矩阵方式排列比较清晰,此时用网格列表组件,即为GridView组件,可实现多行多列的应用场景. 使用GridView创建网格列表有多种方式: GridView.count 通过单行展示个数创建GridView. GridView.extend通过最大宽度创建GridView. 二,构造函数 GridView 使用场景:使用自定义SliverGridDelegate创建可滚动的2D小部件数组 构造函数 GridView({Key key, Axis scrollDirec…

一,概述 图标组件(Icon)为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件. 图标组件相关的几个组件: IconButton:可交互的Icon: Icons:框架自带Icon集合: IconTheme:Icon主题: ImageIcon:通过AssetImages或者其他图片显示Icon. 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWi…

一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函数: new Image: 从ImageProvider获取图像. new Image.asset: 加载本地图片文件. new Image.file: 加载本地图片文件. new Image.network: 加载网络图片. new Image.memory: 加载Uint8List资源图片. 二…

一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text 三,构造方法 单一格式(Text( )) 构造方法创建,只能生成一种style Text() const Text(this.data, { Key key, this.style, this.textAlign, this.textDirecti…

一,前言 Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是由LimitedBox.ConstrainedBox. Align.Padding.DecoratedBox和Transform控件组成,而不是将Container子类化来产生自定义效果,您可以用这种新颖的方式组合这些以及其他简单的控件. 二,基本组件 -- Container 容器,一个…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件. ReorderableListView需要设置children和onReorder属性,children是子控件,onReorder是拖动完成后的回调,用法如下: List<String> items = List.generate(20, (int i) =&…

老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能.修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本,建议慎重,有些人升级后项目无法运行. 今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件. 可以在其内部嵌套其他滚动视图的滚动视图,其滚动位置是固有链接的. 在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBar…