flutter 组件（widget）

一篇好的基础文章

Text

body: Center(
  child: Text(
    '文本内容',
    textAlign: TextAlign.center, //文本显示
    maxLines: 1, // 文本显示行数
    overflow: TextOverflow.ellipsis, //溢出内容怎么显示
    style: TextStyle(
      fontSize: 24, //字体大小
      color: Color.fromAGRB(255, 255, 100, 100), //字体颜色
      decoration: TextDecoration.underline, //下划线
      decorationStyle: TextDecorationStyle.dashed, //下划线(实线、虚线等)
    )
  )
)

Container

body: Center(
  child: Container(
    child: Text('暮光破晓', style: TextStyle(fontSize: 26.0, color: Color.fromARGB(255, 0, 0, 50))),
    alignment: Alignment.topLeft,
    width: 500.0,
    height: 400.0,
    // color: Colors.lightBlue,
    // padding: const EdgeInsets.all(10.0),
    padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0),
    margin: const EdgeInsets.all(10.0),
    decoration: new BoxDecoration(
      gradient: const LinearGradient( // 渐变色
        colors: [Colors.lightBlue, Colors.greenAccent, Colors.purple] 
      ),
      border: Border.all(width: 5.0, color: Colors.red) // 边框
    ),
  ),
)

Image

body: Center(
  child: Container(
    child: new Image.network(
      'https://images.pexels.com/photos/1784578/pexels-photo-1784578.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
      fit: BoxFit.cover,
      color: Colors.green, // 图片颜色混合
      colorBlendMode: BlendMode.darken, // 图片颜色模式
      repeat: ImageRepeat.noRepeat, // 图片和容器的重复关系
    ),
    width: 300.0,
    height: 500.0,
    color: Colors.green,
  )
)

Offstage

Offstage 通过控制offstage来控制child是否显示。
Offstage的布局行为完全取决于其offstage参数

• 当offstage为true（默认为true），当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
• 当offstage为false，当前控件则跟平常用的控件一样渲染绘制；

注意：当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画。
Offstage并不是通过插入或者删除自己在widget tree中的节点，来达到显示以及隐藏的效果，而是通过设置自身尺寸、不响应hitTest以及不绘制，来达到展示与隐藏的效果。

Column(
  children: <Widget>[
    new Offstage(
      offstage: offstage,
      child: Container(color: Colors.blue, height: 100.0),
    ),
    new CupertinoButton(
      child: Text("点击切换显示"),
      onPressed: () {
        setState(() {
          offstage = !offstage;
        });
      },
    ),
  ],
)