Flutter Widget（1）:基础Widget

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
          )
        ),
      ),
    );
  }
}

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

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,
    );
  }
}

Flutter Widget（1）:基础Widget

Container

Text

RichText

Image

例子

猜你喜欢