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篇