藍芽的基本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篇