Flutter widgets（一）

Flutter widgets（一）

来自于Google Flutter Widgets 介绍合集

SafeArea

保证应用内容正常显示

可以和Scaffold搭配使用

Expanded

一般在行或列中,把剩余空间划分给灵活子项，如Expanded

Wrap

解决 行或列布局widgets时空间不足的问题，空间不足时，会新增一行，适合对话图标的Button和小图标

AnimatedContainer

控制隐式的动画的widget，自动为你的更改添加动画效果

Opacity

widget消失并保留原来widget的空间，像ios中的hidden和Android 的invisible

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    RaisedButton(
      onPressed: () {},
      child: Text('first'),
      color: Colors.green,
    ),
    Opacity(
      opacity: 1,
      child: RaisedButton(
        onPressed: () {},
        child: Text('You have pressed the button.'),
      ),
    ),
    RaisedButton(
      onPressed: () {},
      child: Text('third'),
      color: Colors.green,
    ),
  ],
)

把opacity值设置为0，控件就消失了

可以用Opacity将栈视图的不同子视图混合到一起

Stack(
  children: [
    Text("Hello",
        style: TextStyle(color: Colors.lightBlue, fontSize: 50)),
    Opacity(
      opacity: 0.25,
      child: Text(
        "World",
        style: TextStyle(color: Colors.green, fontSize: 50),
      ),
    )
  ],
)

使用AnimatedOpacity 为Opacity添加动画

var _myDuration = Duration(milliseconds: 2000);
var _myOpacity = 1.0;
void action() {
  setState(() {
    _myOpacity = 0.0;
  });
}

Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          RaisedButton(
            onPressed: () {
              action();
            },
            child: Text('first'),
            color: Colors.green,
          ),
          Stack(
            children: [
              Text("Hello",
                  style: TextStyle(color: Colors.lightBlue, fontSize: 50)),
              AnimatedOpacity(
                opacity: _myOpacity,
                duration: _myDuration,
                child: Text(
                  "World",
                  style: TextStyle(color: Colors.green, fontSize: 50),
                ),
              )
            ],
          )
        ],
      )

FutureBuilder

处理Future的最新快照构建widget

FutureBuilder(
  future: Future.delayed(
      Duration(seconds: 2)), //http.get('http://awesome.data')
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        return Text("error");
      }
      return Text('success');
    } else {
      return CircularProgressIndicator();
    }
  },
)

FadeTransition

允许淡入淡出一个widget

class MyFadeIn extends StatefulWidget {
  MyFadeIn({Key key}) : super(key: key);
  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation _animation;
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 5));
    _animation = Tween(begin: 0.0, end: 1.0).animate(controller);
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    controller.forward();
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: FadeTransition(
        opacity: _animation,
        child: Center(
          child: Text('You have pressed the button  times.'),
        ),
      ),
    );
  }
}

FadeInImage

当目标[图像]正在加载时,一个显示[占位符]图像的widget. 当目标图像加载成功,然后淡入目标图像。

String imageUrl =
"https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg";
//占位图assets资源
FadeInImage.assetNetwork(
  fadeInCurve: Curves.easeIn,
  height: 300,
  placeholder: "images/wait.jpg",
  image: imageUrl,
)
--------------------------------------------------
    
dependencies:
  flutter:
    sdk: flutter
  transparent_image: ^0.1.0  
      
import 'package:transparent_image/transparent_image.dart';    
//内存中的占位图,kTransparentImage为透明图片
FadeInImage.memoryNetwork(
        fadeInCurve: Curves.easeIn,
        height: 300,
        placeholder: kTransparentImage,
        image: imageUrl,
      )

ClipRRect

用圆角矩形裁剪它的子元素

ClipRRect(
    borderRadius: BorderRadius.circular(60),
    child: Image.asset("images/wait.jpg"))

Tooltip

提供文本标签，帮助解释按钮或按钮的功能

Tooltip(
  verticalOffset: 48,
  message: "Dash",
  height: 50,
  child: ClipRRect(
      borderRadius: BorderRadius.circular(60),
      child: Image.asset("images/wait.jpg")),
)

LayoutBuilder

构建一个可以依赖于父部件大小的部件树,可以根据父widget的大小加载不同的布局

Scaffold(
  appBar: AppBar(title: Text("LayoutBuilder Example")),
  body: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if (constraints.maxWidth < 600) {
        return _buildWideContainers();
      } else {
        return _buildNormalContainer();
      }
    },
  ),
),

Widget _buildNormalContainer() {
  return Center(
    child: Container(
      height: 100.0,
      width: 100.0,
      color: Colors.red,
    ),
  );
}

Widget _buildWideContainers() {
  return Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          height: 100.0,
          width: 100.0,
          color: Colors.red,
        ),
        Container(
          height: 100.0,
          width: 100.0,
          color: Colors.yellow,
        ),
      ],
    ),
  );
}

AbsorbPointer

屏蔽子widget的触摸事件

AbsorbPointer(
   //false启用触摸,true 禁用触摸
  absorbing: false,
  child: Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          height: 100.0,
          width: 100.0,
          color: Colors.red,
          child: RaisedButton(
            color: Colors.red,
            onPressed: () {
              print(1);
            },
          ),
        ),
        Container(
            height: 100.0,
            width: 100.0,
            color: Colors.yellow,
            child: RaisedButton(
              color: Colors.amber,
              onPressed: () {
                print(2);
              },
            )),
      ],
    ),
  ),
);

Transform

在绘制子控件之前应用转换的widget

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
      //旋转
    Container(
      height: 60.0,
      width: 60.0,
      color: Colors.lightBlue,
      child: Transform.rotate(
        angle: pi / 4, //45
        child: Container(
          color: Colors.red,
        ),
      ),
    ),
      //平移
    Container(
        height: 60.0,
        width: 60.0,
        color: Colors.yellow,
        child: Transform.translate(
          offset: Offset(50, 50),
          child: Container(
            color: Colors.brown,
          ),
        )),
      //偏斜
    Container(
        height: 60.0,
        width: 60.0,
        color: Colors.yellow,
        child: Transform(
          transform: Matrix4.skewX(0.3),
          child: Container(
            color: Colors.green,
          ),
        )),
      //3D转换
    Container(
        height: 60.0,
        width: 60.0,
        color: Colors.yellow,
        child: Transform(
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.01)
            ..rotateX(0.5),
          alignment: FractionalOffset.center,
          child: Container(
            color: Colors.green,
          ),
        )),
  ],
),

如图：