Center 是一个小部件,它将唯一的子小部件放在其中心。Center 和 Align 非常相似。它们只有一个子部件,但 Align 允许我们自定义子部件在其中的位置。
1. Flutter Center
- 有关 Align 的应用请参考 - http://www.yiibai.com/flutter/flutter-align.html
Center 构造器如下:
const Center(
{Key key,
double widthFactor,
double heightFactor,
Widget child}
)
如果不指定widthFactor
,Center
的宽度会尽可能最大,否则Center
的宽度等于子节点的宽度乘以widthFactor
。heightFactor
参数对于中心的高度也具有相同的行为。所以默认情况下,Center
的大小会尽可能大。
Center(
child: Icon (
Icons.place,
size: 128,
color: Colors.redAccent
)
)
示例代码1 - main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@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 Center Example")
),
body: Center(
child: Icon (
Icons.place,
size: 128,
color: Colors.redAccent
)
),
);
}
}
效果如下:
2. child 部件
child 是 Center 的唯一子部件。在某些用例中,它可以是 Row、Column 或 Stack 对象,以便可能包含许多其他小部件。
Widget child
例如,如果一个 child 是 Row 对象,它可以在一行上包含许多子小部件。示例代码如下:
Center (
child: Row (
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon (
Icons.place,
size: 48,
color: Colors.redAccent
),
Text("My Location!")
],
)
)
效果如下:
例如,如果一个 Child 是 Column 对象,它可以在一个列上包含许多子小部件。示例代码如下:
Center (
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon (
Icons.place,
size: 48,
color: Colors.redAccent
),
Text("My Location!")
],
)
)
效果如下:
3. widthFactor
widthFactor 是一个因子,用于根据 child 的宽度计算 Center 的宽度。如果 widthFactor 不为null
,则 Center 的宽度等于子节点的宽度乘以该因子。
如果不指定 widthFactor ,则 Center 的宽度将尽可能大。
double widthFactor
示例代码:
Center(
child: ElevatedButton (
child: Text("Button"),
onPressed: () {}
),
widthFactor: 2.0
)
效果如下:
4. heightFactor
heightFactor
是一个因子,用于根据孩子的身高计算 Center 的高度。如果 widthFactor 不为null
,则 Center 的高度等于 child 节点的高度乘以这个因子。
如果未指定 heightFactor,则 Center 的高度将尽可能大。
double heightFactor
示例代码:
Center(
child: ElevatedButton (
child: Text("Button"),
onPressed: () {}
),
heightFactor: 3.0
)
效果如下: