1. RotatedBox
RotatedBox 是一个小部件,可将其子部件旋转四分之一圈。每个四分之一是 90 度或 -90 度的角度。
RotatedBox构造函数:
const RotatedBox(
{Key key,
@required int quarterTurns,
Widget child}
)
下面是一个使用 RotatedBox 将 Text 对象顺时针旋转 90 度(quarterTurns = 1)的示例代码 -
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("Flutter RotatedBox Example"),
),
body: Center (
child: RotatedBox (
quarterTurns: 1,
child: Text(
"Flutter RotatedBox Tutorial",
style: TextStyle(fontSize: 25)
)
)
)
);
}
}
运行效果图如下:
下面是另一个示例,将 Text 对象逆时针旋转 90 度(quarterTurns = -1)。
RotatedBox (
quarterTurns: -1,
child: Text(
"Flutter RotatedBox Tutorial",
style: TextStyle(fontSize: 25)
)
)
效果如下:
LinearProgressIndicator 是一个水平进度条,可以使用 RotatedBox 旋转 90 度以获得垂直进度条。
RotatedBox(
quarterTurns: -1,
child: SizedBox(
width: 250,
height: 25,
child : LinearProgressIndicator(
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
)
)
)
效果如下:
2. quarterTurns
quadTurns 是子部件必须顺时针旋转 90 度的次数。quadTurns 的值可以是负整数。
@required int quarterTurns
3. child属性
Widget child