内容:

  • Button
  • Image、Icon
  • Switch、Checkbox
  • TextField
  • Form

1、Button

  • RaisedButton 漂浮按钮
  • FlatButton 扁平按钮
  • OutlineButton 边框按钮
  • IconButton 图标按钮
RaisedButton(
child:Text("normal"),
onPressed:()=>{},
) FlatButton(
child:Text("normal"),
onPressed:()=>{},) OutlineButton(
child: Text("normal"),
onPressed: ()=>{},
) IconButton(
icon:Icon(Icon.thumb_up),
onPressed: ()=>{},
)
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () => {}
)

2、Image、Icon

Image 数据源可以是asset 、文件、内存、网络
 
ImageProvider
主要定义图片数据获取的接口load() ,从不同数据源获取图片需要实现不同的ImageProvider.
 
2.1 Image 构造方法
const Image({
...
this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
...})

2.2 从asset 加载图片

  1. 在工程根目录下创建一个images目录,并将图片avatar.png拷贝到该目录。
  2. 在pubspec.yaml中的flutter部分添加如下内容:
assets:
- images/avatar.png

注意: 由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行缩进,此处assets前面应有两个空格。

3.加载图片

Image(
image: AssetImage("images/avatar.png"),
width: 100.0);
//Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片:
Image.asset("images/avatar.png",
width: 100.0,) //从网络加载图片
Image(
image: NetworkImage(
width: 100.0,)
 

Icon

可以使用iconfont
iconfont 和图片对比对比:
1、体积小 
2、矢量图标,放大不影响清晰度
3、可以像文本一样改变字体图标颜色、大小、对齐方式。
4、可以通过TextSpan 和文本混用
使用Material Design字体图标
使用自定义字体图标
1、导入字体图标文件,假设我们的字体图标保存在项目根目录下,路径为“fonts/iconfont.ttf”:
fonts:
family:myIcon 指定一个字体名
fonts:
-asset: fonts/iconfont.ttf

2、为了方便使用 定义一个MyIcons类,将字体文件中的所有图标都定义为静态变量:

class MyIcons{
// book 图标
static const IconData book = const IconData(
0xe614,
fontFamily: 'myIcon',
matchTextDirection: true
);
// 微信图标
static const IconData wechat = const IconData(
0xec7d,
fontFamily: 'myIcon',
matchTextDirection: true
); }

3、使用

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(MyIcons.book,color: Colors.purple,),
Icon(MyIcons.wechat,color: Colors.green,),
],)

Flutter默认包含了一套Material Design的字体图标,在pubspec.yaml文件中的配置如下:

flutter:
uses-material-design: true

示例:

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],)
3、Switch单选开关、Checkbox复选框
Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox,它们都是继承自StatelessWidget,所以它们本身不会保存当前选择状态,所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时,它们会触发onChanged回调,我们可以在此回调中处理选中状态改变逻辑。
示例:
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
@override
_SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();} class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
bool _switchSelected=true; //维护单选开关状态
bool _checkboxSelected=true;//维护复选框状态
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Switch(
value: _switchSelected,//当前状态
onChanged:(value){
//重新构建页面
setState(() {
_switchSelected=value;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //选中时的颜色
onChanged:(value){
setState(() {
_checkboxSelected=value;
});
} ,
)
],
);
}}

4、输入框

TextField 用于文本输入。

4.1 构造方法

const TextField({
...
TextEditingController controller,
FocusNode focusNode,
InputDecoration decoration = const InputDecoration(),
TextInputType keyboardType,
TextInputAction textInputAction,
TextStyle style,
TextAlign textAlign = TextAlign.start,
bool autofocus = false,
bool obscureText = false,
int maxLines = 1,
int maxLength,
bool maxLengthEnforced = true,
ValueChanged<String> onChanged,
VoidCallback onEditingComplete,
ValueChanged<String> onSubmitted,
List<TextInputFormatter> inputFormatters,
bool enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
...})
  • controller:编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller,则TextField内部会自动创建一个。
  • focusNode:用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个handle。
  • InputDecoration:用于控制TextField的外观显示,如提示文本、背景颜色、边框等。
  • keyboardType:用于设置该输入框默认的键盘输入类型,取值如下:
    | TextInputType枚举值 | 含义 | | ------------------- | --------------------------------------------------- | | text | 文本输入键盘 | | multiline | 多行文本,需和maxLines配合使用(设为null或大于1) | | number | 数字;会弹出数字键盘 | | phone | 优化后的电话号码输入键盘;会弹出数字键盘并显示"* #" | | datetime | 优化后的日期输入键盘;Android上会显示“: -” | | emailAddress | 优化后的电子邮件地址;会显示“@ .” | | url | 优化后的url输入键盘; 会显示“/ .” |
  • textInputAction:键盘动作按钮图标(即回车键位图标),它是一个枚举值,有多个可选值,全部的取值列表读者可以查看API文档,下面是当值为TextInputAction.search时,原生Android系统下键盘样式:
  • style:正在编辑的文本样式。
  • textAlign: 输入框内编辑文本在水平方向的对齐方式。
  • autofocus: 是否自动获取焦点。
  • obscureText:是否隐藏正在编辑的文本,如用于输入密码的场景等,文本内容会用“•”替换。
  • maxLines:输入框的最大行数,默认为1;如果为null,则无行数限制。
  • maxLength和maxLengthEnforced :maxLength代表输入框文本的最大长度,设置后输入框右下角会显示输入的文本计数。maxLengthEnforced决定当输入文本长度超过maxLength时是否阻止输入,为true时会阻止输入,为false时不会阻止输入但输入框会变红。
  • onChange:输入框内容改变时的回调函数;注:内容改变事件也可以通过controller来监听。
  • onEditingComplete和onSubmitted:这两个回调都是在输入框输入完成时触发,比如按了键盘的完成键(对号图标)或搜索键(

    Flutter 基础控件的更多相关文章

    1. Flutter 布局控件完结篇

      本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...

    2. React Native环境搭建以及几个基础控件的使用

      之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

    3. Cocos2d-JS项目之二:studio基础控件的使用

      在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: var HelloWorldLayer = cc.Layer.extend({ sprite:null, ...

    4. [iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)

      A.概述      在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能      1.按钮点击后,显示为“已下载”,并且不 ...

    5. Delphi一共封装(超类化)了8种Windows基础控件和17种复杂控件

      超类化源码: procedure TWinControl.CreateSubClass(var Params: TCreateParams; ControlClassName: PChar); con ...

    6. Cocos2d-JS studio基础控件的使用

      在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: 1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:nu ...

    7. Python Tkinter基础控件入门实例

      分享一个Python Tkinter基础控件用法的入门例子,包括窗口的显示.显示内置图片.弹出窗口.菜单等. 例子,Python Tkinter基础控件的用法 # -*- coding: utf-8 ...

    8. iOS界面设计之基础控件的学习 --- UITextField

      学习iOS界面设计也有段时间了,每次写到一些基础控件(如:UILable . UITextField)的时候就深觉应该总结一个函数来实现这些基础控件的属性设置,所以下面就是我对UITextField的 ...

    9. WPF基础控件

      1.所有基础控件结束(英文) http://www.dotnetperls.com/tooltip-wpf 2.wpf- DataGrid 常用属性和事件 3.

    随机推荐

    1. iOS Privacy Policy

      This application respects and protects the privacy of all users who use the service. In order to pro ...

    2. Client error attempting to change layout margins of a private view

      从 iOS 11 开始,UINavigationBar 使用了自动布局,左右两边的按钮到屏幕之间会有 16 或 20 的边距. 为了避免点击到间距的空白处没有响应,通常做法是:定义一个 UINavig ...

    3. AndroidStudio初识

      大家好,欢迎来到下码看花,伟大领袖毛爷爷曾经说过:“ ‘走马看花不如驻马看花,驻马看花不如下马看花.’我希望你们都要下马看花.”,比喻停下来,深入实际,认真调查研究,这就是咱们公众号名字的由来.与君初 ...

    4. 蒟蒻的PKUWC2019划水记(更新ing)

      前言 (结束再补) \(Dec\ 20th\) 正式出发 今天,是正式出发的日子. 虽说是星期五,可并没有去学校晨跑.难得睡到了\(7\)点,起来匆匆吃完了早饭(一个手抓饼),就出发去火车站了. 到了 ...

    5. C#线程学习笔记二:线程池中的工作者线程

      本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/18/ThreadPool.html,记录一下学习过程以备后续查用. 一.线程池基础 首先,创 ...

    6. nmcli详解

      1. nmcli 安装 [root@liujunjun ~]# yum install -y NetworkManager CentOS7默认已安装了 2. nmcli 基本选项 选项 作用 -t 简 ...

    7. gitlab-CI作业-yml

      stages: - build - deploy before_script: - echo "Restore NuGet Packages..." - echo "do ...

    8. 10 个提升效率的Linux小技巧

      您是否曾经惊讶于看到某人在 UNIX 中非常快速地工作,触发命令并快速地执行操作?是的,我碰到过几次,并且我一直都在向那些超级巨星开发者学习.在本文中,我想分享一些 UNIX 命令实践,这些实践是我在 ...

    9. Delphi xe 10.3.2-快递接口封装-【快递鸟(即时查询和单号识别)】

      编译环境:Windows 7 +Delphi xe 10.3.2 封装了快递鸟接口,注意的坑:MD5要转为小写. function TKDniaoAPI.StrtoMd5(const str: str ...

    10. 一文了解 Consistent Hash

      本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/LGLqEOlGExKob8xEXXWckQ作者:钱幸川 在分布式环境下面,我们经常会通过一定的 ...