Flutter (四) Widget基础 ( 二)

按钮

Material widget库中提供了多种按钮Widget如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton的包装定制，所以他们大多数属性都和RawMaterialButton一样。

所有Material 库中的按钮都有如下相同点：

按下时都会有“水波动画”。有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

RaisedButton

RaisedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大

const RaisedButton({ Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation, double highlightElevation, double disabledElevation, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior = Clip.none, MaterialTapTargetSize materialTapTargetSize, Duration animationDuration, Widget child, })

使用：

RaisedButton( child: Text("normal"), onPressed: () => {}, );

FlatButton

FlatButton即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色：

@required this.onPressed, //按钮点击回调 this.textColor, //按钮文字颜色 this.disabledTextColor, //按钮禁用时的文字颜色 this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮按下时的背景颜色 this.splashColor, //点击时，水波动画中水波的颜色 this.colorBrightness,//按钮主题，默认是浅色主题 this.padding, //按钮的填充 this.shape, //外形 @required this.child, //按钮的内容

使用：

FlatButton( child: Text("normal"), onPressed: () => {}, )

OutlineButton

OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)：

使用：

OutlineButton( child: Text("normal"), onPressed: () => {}, )

IconButton

IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景：

使用：

IconButton( icon: Icon(Icons.thumb_up), onPressed: () => {}, ) RaisedButton( child: Text("normal"), color: Colors.red, onPressed: () => {}, ), FlatButton( child: Text("normal"), color: Colors.blue, onPressed: () => {}, ), OutlineButton( child: Text("normal"), onPressed: () => {}, ), IconButton( icon: Icon(Icons.thumb_up), highlightColor: Colors.red, padding: const EdgeInsets.all(2.0), 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: () => {}, ),

图片及ICON

Flutter中，我们可以通过Image来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络。

ImageProvider

ImageProvider 是一个抽象类，主要定义了图片数据获取的接口load()，从不同的数据源获取图片需要实现不同的ImageProvider ，如AssetImage是实现了从Asset中加载图片的ImageProvider，而NetworkImage实现了从网络加载图片的ImageProvider。

Image

Image widget有一个必选的image参数，它对应一个ImageProvider。下面我们分别演示一下如何从asset和网络加载图片。

1.从asset中加载图片

a.在工程根目录下创建一个images目录，并将图片1.png拷贝到该目录; b.在pubspec.yaml中的flutter部分添加如下内容;

assets: - images/avatar.png//由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。 加载该图片

c.加载该图片

Image( image: AssetImage("images/avatar.png"), width: 100.0 );

Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片：

Image.asset("images/avatar.png", width: 100.0, )

2.从网络加载图片

Image( image: NetworkImage( "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"), width: 100.0, )

Image也提供了一个快捷的构造函数Image.network用于从网络加载、显示图片：

Image.network( "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4", width: 100.0, ) Image( image: AssetImage("images/1.jpg"), width: 200.0, ), Image.asset( "images/1.jpg", width: 100.0, ), Image( image: NetworkImage( "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"), width: 100.0, )

参数

const Image({ ... this.width, //图片的宽 this.height, //图片高度 this.color, //图片的混合色值 this.colorBlendMode, //混合模式 this.fit,//缩放模式 this.alignment = Alignment.center, //对齐方式 this.repeat = ImageRepeat.noRepeat, //重复方式 ... })

ICON

Flutter中，可以像web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。

在Flutter开发中，iconfont和图片相比有如下优势：

体积小：可以减小安装包大小。矢量的：iconfont都是矢量图标，放大不会影响其清晰度。可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。可以通过TextSpan和文本混用。

使用Material Design字体图标

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

flutter: uses-material-design: true

Material Design所有图标可以在其官网查看：https://material.io/tools/icons/

String icons = ""; // accessible:  or 0xE914 or E914 icons += "\uE914"; // error:  or 0xE000 or E000 icons += " \uE000"; // fingerprint:  or 0xE90D or E90D icons += " \uE90D"; Text(icons, style: TextStyle( fontFamily: "MaterialIcons", fontSize: 24.0, color: Colors.green ), );

通过这个示例可以看到，使用图标就像使用文本一样，但是这种方式需要我们提供每个图标的码点，这并对开发者不友好，所以，Flutter封装了一个IconData和Icon来专门显示字体图标，上面的例子也可以用如下方式实现：

Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.accessible,color: Colors.green,), Icon(Icons.error,color: Colors.green,), Icon(Icons.fingerprint,color: Colors.green,), ], )

使用自定义字体图标

我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。

在阿里巴巴矢量图里下

1.导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"：

fonts: - family: myIcon #指定一个字体名 fonts: - asset: fonts/iconfont.ttf

2.为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量：

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,), ], )

// 想了半天还是没有办法，有哪位大佬知道怎么看阿里图标的下面箭头的对应值，望告知

这是昨天晚上的遗留问题

在网上找了半天，看了一个文案 https://segmentfault.com/a/1190000017978633?utm_source=tag-newest 希望有用

晚上回去再试，公司电脑没环境

测试好了，是对的，比如上面 人机交互

static const IconData book = const IconData(0xeb66, fontFamily: 'myIcon', matchTextDirection: true); // 使用 Icon( MyIcons.book, color: Colors.purple, ),