蓝牙的基本widgets教程-Transform篇

1 Transform
在绘制子widget之前应用转换的widget
蓝牙的基本widgets教程-Transform篇
2 构造函数
`Transform({

Key key,
@required this.transform,
this.origin,
this.alignment,
this.transformHitTests = true,
Widget child,

})`
3 常用属性
3.1 origin：指定子组件做平移、旋转、缩放时的中心点
origin: Offset(50, 50),
3.2 alignment：对齐方式
alignment:Alignment.center,
3.2.1 顶部左边

alignment:Alignment.topLeft,
3.2.2 顶部中间

alignment:Alignment.topCenter,
3.2.3 顶部右边

alignment:Alignment.topRight,
3.2.4 中部左边

alignment:Alignment.centerLeft,
3.2.5 中部中间

alignment:Alignment.center,
3.2.6 中部右边

alignment:Alignment.centerRight,
3.2.7 底部左边

alignment:Alignment.bottomLeft,
3.2.8 底部中间

alignment:Alignment.bottomCenter,
3.2.9 底部右边

alignment:Alignment.bottomRight,
3.3 transformHitTests：点击区域是否也做相应的变换,为true时执行相应的变换,为false不执行
transformHitTests:true,
3.4 transform：控制子组件的平移、旋转、缩放、倾斜变换
transform: Matrix4.rotationX(radian),
3.4.1 旋转

transform: Matrix4.rotationX(radian),
transform: Matrix4.rotationY(radian),
transform: Matrix4.rotationZ(radian),
3.4.2 平移

transform:Matrix4.translation(Vector3(x, y, z)),
transform:Matrix4.translation(Vector3.all(val)),
transform:Matrix4.translationValues(x, y, z),
3.4.3 缩放

transform:Matrix4.diagonal3(Vector3(x, y, z)),
transform:Matrix4.diagonal3(Vector3.all(val)),
transform:Matrix4.diagonal3Values(x, y, z),
3.4.4 倾斜

transform:Matrix4.skewX(alpha),
transform:Matrix4.skewY(double beta),
transform:Matrix4.skew(alpha, beta),
3.5 child：子widget
child: Text('你好 Flutter'),
4.显示效果

5.代码
`import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
// 字体适配
import '../../utils/app_size.dart';

class ListTransform extends StatelessWidget {
@override
Widget build(BuildContext context) {

return DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Transform'),
      backgroundColor: Color(0xFFfafcff),
      bottom: TabBar(labelColor: Color(0xff030303), tabs: [
        Tab(
          text: "效果",
        ),
        Tab(
          text: "属性",
        )
      ]),
    ),
    body: TabBarView(children: [
      Container(
          decoration: new BoxDecoration(
            color: new Color(0xffffffff),
            borderRadius: new BorderRadius.circular((AppSize.width(20))),
          ),
          child: ShowEffect()),
      Container(
          decoration: new BoxDecoration(
            color: new Color(0xffffffff),
            borderRadius: new BorderRadius.circular((AppSize.width(20))),
          ),
          child: ShowAttribute()),
    ]),
  ),
);

}
}

// 效果
class ShowEffect extends StatelessWidget {
@override
Widget build(BuildContext context) {

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("Transform"),
    ),
    body: Center(
      child: Container(
        color: Colors.black,
        child: new Transform(
          alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
          transform: new Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
          child: new Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text('转换的widget'),
          ),
        ),
      ),
    ),
  ),
);

}
}

// 属性
class ShowAttribute extends StatelessWidget {
@override
Widget build(BuildContext context) {

return Container(
  child: FutureBuilder(
    future: rootBundle.loadString('lib/markdown/transform.md'),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {
        return Markdown(
          data: snapshot.data,
          selectable: true,
        );
      } else {
        return Center(
          child: Text("加载中..."),
        );
      }
    },
  ),
);

}
}`
蓝牙的基本widgets教程-Transform篇