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。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'container',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('container'),
        ),
        body: Container(
          child: Text('xhhsasasashs'),
          height: 400.0,
          alignment: Alignment.bottomCenter,
//          color: Colors.redAccent,
          padding: EdgeInsets.all(20.0),
          margin: EdgeInsets.all(12.0),
          decoration: BoxDecoration(
            border: Border.all(
                color: Color(0xffff2200), width: 8.0, style: BorderStyle.solid
            ),
            color: Colors.grey,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            image: new DecorationImage(
              image: NetworkImage('https://www.baidu.com/img/bd_logo1.png'),
              fit: BoxFit.fitWidth
            ),
          ),
          constraints: BoxConstraints(
            maxHeight: 500.0
          )
        ),
      ),
    );
  }
}

2.Text

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

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

const TextStyle({
    this.inherit: true,         // 为false的时候不显示
    this.color,                    // 颜色 
    this.fontSize,               // 字号
    this.fontWeight,           // 绘制文本时使用的字体粗细，加粗也用这个字段 
    this.fontStyle,                // FontStyle.normal  FontStyle.italic斜体
    this.letterSpacing,        // 字符间距  就是单个字母或者汉字之间的间隔，可以是负数
    this.wordSpacing,        // 字间距 句字之间的间距
    this.textBaseline,        // 基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）
    this.height,                // 当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
    this.decoration,        // 添加上划线，下划线，删除线 
    this.decorationColor,    // 划线的颜色
    this.decorationStyle,    // 这个style可能控制画实线，虚线，两条线，点, 波浪线等
    this.debugLabel,
    String fontFamily,    // 字体
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       assert(inherit != null);

• textAlign：对齐方式
• textDirection：跟textAlign相似，TextDirection.ltr文本从左到右
• softWrap：是否需要换行。默认为true
• overflow：超出文本处理，clip 裁剪，ellipsis 显示省略号，fade 文本淡化
• maxLines：最大行数

RichText

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

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

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
  当图片发生改变之后，重新加载图片过程中的样式

例子

import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:typed_data';

import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

//assets/images/tzd.jpg
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    debugPaintSizeEnabled = true;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image demo'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              //加载网络图片
              Image.network(
                'https://www.baidu.com/img/bd_logo1.png?where=super',
                width: 100.0,
                height: 100.0,
              ),

              //加载Assets
              Image.asset(
                'assets/images/tzd.jpg',
                width: 200.0,
                height: 200.0,
              ),

              //Memory
              MemoryImageWidget(),

              //从文件加载图片
              FileImageWidget(),
            ],
          ),
        ),
      ),
    );
  }
}

class FileImageWidget extends StatefulWidget {
  @override
  _FileImageWidgetState createState() => _FileImageWidgetState();
}

class _FileImageWidgetState extends State<FileImageWidget> {
  File _image;

  Future getImge() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(
          child: _image == null
              ? Text('未选择图片！')
              : Image.file(
                  _image,
                  width: 200.0,
                  height: 200.0,
                ),
        ),
        FlatButton(
          onPressed: getImge,
          child: Text(
            '选择图片',
            style: TextStyle(
              color: Color(0xff0000ff),
            ),
          ),
        ),
      ],
    );
  }
}

//stf StatefulWidget快捷键， stl StatelessWidget快捷键
class MemoryImageWidget extends StatefulWidget {
  @override
  _MemoryImageWidgetState createState() => _MemoryImageWidgetState();
}

class _MemoryImageWidgetState extends State<MemoryImageWidget> {
  Uint8List bytes;

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/images/tzd.jpg').then((data) {
      if (mounted) {
        setState(() {
          bytes = data.buffer.asUint8List();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final _decoration = BoxDecoration(
      image: bytes == null ? null : DecorationImage(image: MemoryImage(bytes)),
    );
    return Container(
      width: 100.0,
      height: 100.0,
      decoration: _decoration,
    );
  }
}

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	“”	当按钮长按下时的提示语句