Flutter Widget(1):基础Widget

1.Container

  • Container类似于android中的ViewGroup。可以实现设置背景颜色、背景图片、加边框、加圆角、各方向对齐等功能,是项目中经常用到的Widget。
  • 对于一个没有子Widget的Container,在没有一些约束的条件时,它会尽可能的大;而一旦有了约束或者子Widget,它就会变得尽可能小。
  • key:Container唯一标识符,用于查找更新。

  • alignment:控制child的对齐方式,如果container或者container父节点尺寸大于child的尺寸,这个属性设置会起作用,有很多种对齐方式。

  • padding:decoration内部的空白区域,如果有child的话,child位于padding内部。padding与margin的不同之处在于,padding是包含在content内,而margin则是外部边界,设置点击事件的话,padding区域会响应,而margin区域不会响应。

  • color:用来设置container背景色,如果foregroundDecoration设置的话,可能会遮盖color效果。

  • decoration:Decoration是对Container进行装饰的描述。其概念类似与android中的shape。一般实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色,边框,圆角,阴影和渐变等功能的定制能力。注意设置了decoration,就不能设置color属性,否则会报错,此时应该在decoration中进行颜色的设置。

  • foregroundDecoration:绘制在child前面的装饰。

  • width:container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局。

  • height:container的高度,设置为double.infinity可以强制在高度上撑满。

  • constraints:添加到child上额外的约束条件。

  • margin:围绕在decoration和child之外的空白区域,不属于内容区域。

  • transform:设置container的变换矩阵,类型为Matrix4。

  • child:container中的内容widget。

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 // TODO: implement build 9 return MaterialApp( 10 title: 'container', 11 theme: ThemeData( 12 primarySwatch: Colors.blue, 13 ), 14 home: Scaffold( 15 appBar: AppBar( 16 title: Text('container'), 17 ), 18 body: Container( 19 child: Text('xhhsasasashs'), 20 height: 400.0, 21 alignment: Alignment.bottomCenter, 22// color: Colors.redAccent, 23 padding: EdgeInsets.all(20.0), 24 margin: EdgeInsets.all(12.0), 25 decoration: BoxDecoration( 26 border: Border.all( 27 color: Color(0xffff2200), width: 8.0, style: BorderStyle.solid 28 ), 29 color: Colors.grey, 30 borderRadius: BorderRadius.all(Radius.circular(20)), 31 image: new DecorationImage( 32 image: NetworkImage('https://www.baidu.com/img/bd_logo1.png'), 33 fit: BoxFit.fitWidth 34 ), 35 ), 36 constraints: BoxConstraints( 37 maxHeight: 500.0 38 ) 39 ), 40 ), 41 ); 42 } 43} 44 45

2.Text

Text 控件是用来显示一段文本的

  • style:设置文本的样式,要求TextStyle类型,可以设置字体颜色、大小、字间距等等。

1const TextStyle({ 2 this.inherit: true, // 为false的时候不显示 3 this.color, // 颜色 4 this.fontSize, // 字号 5 this.fontWeight, // 绘制文本时使用的字体粗细,加粗也用这个字段 6 this.fontStyle, // FontStyle.normal FontStyle.italic斜体 7 this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔,可以是负数 8 this.wordSpacing, // 字间距 句字之间的间距 9 this.textBaseline, // 基线,两个值,字面意思是一个用来排字母的,一人用来排表意字的(类似中文) 10 this.height, // 当用来Text控件上时,行高(会乘以fontSize,所以不以设置过大) 11 this.decoration, // 添加上划线,下划线,删除线 12 this.decorationColor, // 划线的颜色 13 this.decorationStyle, // 这个style可能控制画实线,虚线,两条线,点, 波浪线等 14 this.debugLabel, 15 String fontFamily, // 字体 16 String package, 17 }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily', 18 assert(inherit != null); 19 20
  • textAlign:对齐方式
  • textDirection:跟textAlign相似,TextDirection.ltr文本从左到右
  • softWrap:是否需要换行。默认为true
  • overflow:超出文本处理,clip 裁剪,ellipsis 显示省略号,fade 文本淡化
  • maxLines:最大行数

RichText

RichText:Text 只能显示一种样式的文字,如果你想在一段文字中显示多种样式的话 ,就需要使用 RichText 了。

1RichText( 2 text: TextSpan( 3 text: 'Hello ', 4 style: DefaultTextStyle.of(context).style, 5 children: <TextSpan>[ 6 TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)), 7 TextSpan(text: ' world!'), 8 ], 9 ), 10) 11 12

3.Image

  • Image:通过ImageProvider来加载图片
  • Image.asset:用来加载本地资源图片
  • Image.file:用来加载本地(File文件)图片
  • Image.network:用来加载网络图片
  • Image.memory:用来加载Uint8List资源(byte数组)图片

图片格式上支持: JPEG , PNG ,GIF , 动态 GIF , WebP , 动态WebP , BMP WBMP .

  • width & height

用来指定显示图片区域的宽高(并非图片的宽高)

  • fit

设置图片填充,类似于Android中的ScaleType

  • BoxFit.none

原始大小居中 * BoxFit.contain
包含,不改变原有比例让容器包含整个图片,容器多余部分填充背景 * BoxFit.cover
覆盖,不改变原有比例,让图片充满整个容器,图片多余部分裁剪 * BoxFit.fill
填充,忽略原有的宽高比,填满为止 * BoxFit.fitHeight
纵向图片填充 * BoxFit.fitWidth
横向图片填充 * BoxFit.scaleDown
图片大小小于容器事相当于none,图片大小大于容器时缩小图片大小实现contain

  • color & colorBlendMode

这两个属性需要配合使用,就是颜色和图片混合,就类似于Android中的Xfermode,一般少用到

  • alignment

用来控制图片摆放的位置

  • repeat

用来设置图片重复显示(repeat-x水平重复,repeat-y垂直重复,repeat两个方向都重复,no-repeat默认情况不重复),就是填充view时候的不同方式。

  • centerSlice

设置图片内部拉伸,相当于在图片内部设置了一个.9图,但是需要注意的是,要在显示图片的大小大于原图的情况下才可以使用这个属性,要不然会报错.理由是下面这个源码:
assert(sourceSize == inputSize, 'centerSlice was used with a BoxFit that does not guarantee that the image is fully visible.');

  • matchTextDirection

这个需要配合Directionality进行使用

  • gaplessPlayback

当图片发生改变之后,重新加载图片过程中的样式

例子

1import 'dart:io'; 2import 'dart:math'; 3 4import 'package:flutter/material.dart'; 5import 'package:flutter/rendering.dart'; 6import 'dart:typed_data'; 7 8import 'package:flutter/services.dart'; 9import 'package:image_picker/image_picker.dart'; 10 11void main() => runApp(MyApp()); 12 13//assets/images/tzd.jpg 14class MyApp extends StatelessWidget { 15 @override 16 Widget build(BuildContext context) { 17// debugPaintSizeEnabled = true; 18 return MaterialApp( 19 home: Scaffold( 20 appBar: AppBar( 21 title: Text('Image demo'), 22 ), 23 body: Center( 24 child: Column( 25 children: <Widget>[ 26 //加载网络图片 27 Image.network( 28 'https://www.baidu.com/img/bd_logo1.png?where=super', 29 width: 100.0, 30 height: 100.0, 31 ), 32 33 //加载Assets 34 Image.asset( 35 'assets/images/tzd.jpg', 36 width: 200.0, 37 height: 200.0, 38 ), 39 40 //Memory 41 MemoryImageWidget(), 42 43 //从文件加载图片 44 FileImageWidget(), 45 ], 46 ), 47 ), 48 ), 49 ); 50 } 51} 52 53class FileImageWidget extends StatefulWidget { 54 @override 55 _FileImageWidgetState createState() => _FileImageWidgetState(); 56} 57 58class _FileImageWidgetState extends State<FileImageWidget> { 59 File _image; 60 61 Future getImge() async { 62 var image = await ImagePicker.pickImage(source: ImageSource.gallery); 63 setState(() { 64 _image = image; 65 }); 66 } 67 68 @override 69 Widget build(BuildContext context) { 70 return Column( 71 children: <Widget>[ 72 Center( 73 child: _image == null 74 ? Text('未选择图片!') 75 : Image.file( 76 _image, 77 width: 200.0, 78 height: 200.0, 79 ), 80 ), 81 FlatButton( 82 onPressed: getImge, 83 child: Text( 84 '选择图片', 85 style: TextStyle( 86 color: Color(0xff0000ff), 87 ), 88 ), 89 ), 90 ], 91 ); 92 } 93} 94 95//stf StatefulWidget快捷键, stl StatelessWidget快捷键 96class MemoryImageWidget extends StatefulWidget { 97 @override 98 _MemoryImageWidgetState createState() => _MemoryImageWidgetState(); 99} 100 101class _MemoryImageWidgetState extends State<MemoryImageWidget> { 102 Uint8List bytes; 103 104 @override 105 void initState() { 106 super.initState(); 107 rootBundle.load('assets/images/tzd.jpg').then((data) { 108 if (mounted) { 109 setState(() { 110 bytes = data.buffer.asUint8List(); 111 }); 112 } 113 }); 114 } 115 116 @override 117 Widget build(BuildContext context) { 118 final _decoration = BoxDecoration( 119 image: bytes == null ? null : DecorationImage(image: MemoryImage(bytes)), 120 ); 121 return Container( 122 width: 100.0, 123 height: 100.0, 124 decoration: _decoration, 125 ); 126 } 127} 128 129 130

4.Icon

图标组件Icon展示图标的组件,该组件不可交互,要实现交互图标,可以考虑使用IconButton组件。图标相关组件有以下几个:

  • IconButton:可交互的Icon
  • Icons:框架自带Icon集合
  • IconTheme:Icon主题
  • ImageIcon:通过AssetImages或者其他图片显示Icon

常用属性

color Color null 图标的颜色,例如Colors.green[500] icon IconData null 展示的具体图标,可使用Icons图标列表中的任意一个图标即可,如Icons.phone表示一个电话的图标 style TextStyle null 文本样式,可定义文本的字体大小、颜色、粗细等 size Double 24.0 图标的大小,注意需要带上小数位 textDirection TextDirection TextDirection.ltr Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右,有些则是从右到左。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl

IconButton

图标按钮组件IconButton是基于Meterial Design风格的组件,可以响应按下的事件,并且按下时带水波纹效果。如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可按下。

常用属性

alignment AlignmentGeometry Alignment.center 定义IconButton的Icon对齐方式,默认为居中。Alignment可以设置x,y的偏移量 icon Widget null 展示的具体图标,可以使用Icons图标列表中任意一个图标即可,如Icons.phone表示一个电话图标 color Color null 图标组件的颜色 disabledColor Color ThemeData.disabledColor 图标组件禁用状态的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色 iconSize double 24.0 图标的大小,注意需要带上小数点 onPressed VoidCallback null 当按钮按下时会触发此回调事件 tooltip String “” 当按钮长按下时的提示语句

代码交流 2021