Flutter 组件基础 ——Container#
Container 是容器组件，类似于 H5 中的
Container 包含属性#
Container 常用属性如下：
- Container
- child：子视图
- alignment：子视图的对齐方式
- topLeft：顶部左对齐
- topCenter：顶部居中对齐
- topRight：顶部右对齐
- centerLeft：中间左对齐
- center：中间对齐
- centerRight：中间右对齐
- bottomLeft：底部左对齐
- bottomCenter：底部居中对齐
- bottomRight：底部右对齐
- color：背景颜色
- width：宽度
- height：高度
- padding：子视图距 Container 的边距
- margin：Container 距父视图的边距
- decoration：装饰
子视图对齐方式 - alignment#
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container Learn',
home: Scaffold(
body: Center(
child: Container(
child: Text(
'Alignment center',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.center,
width: 500.0,
height: 400.0,
color: Colors.lightBlue,
),
),
),
);
}
}
效果图如下：
Container 宽、高#
width 和 height 的设置，直接是固定的值。
没有类似 H5 那种 '100%' 的设置。所以如果想要设置 Container 为屏幕宽高时，可以用以下的方法：
方法一：
import 'dart:ui';
final width = window.physicalSize.width;
final height = window.physicalSize.height;
Container(
color: Colors.red,
width: width,
child: Text("宽度有多宽"),
)
方法二：
Container(
color: Colors.red,
width: double.infinity,
child: Text("宽度有多宽"),
)
子视图距 Container 的边距 - padding#
padding 设置的是子视图，距 Container 的边距，两种设置方式，通常有两种设置方式，EdgeInsets.all常用于设置所有边距都一致；EdgeInsets.fromLTRB用于设置指定边距（LTRB 对应的 Left、Top、Right、Bottom）。代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container Learn',
home: Scaffold(
body: Center(
child: Container(
child: Text(
'padding left: 10, top: 20',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.topLeft,
width: 500.0,
height: 400.0,
color: Colors.lightBlue,
padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
// padding: const EdgeInsets.all(20),
),
),
),
);
}
}
显示效果如下：
contianer 距离父视图的边距 - margin#
margin 的设置和 padding 相同，效果对比，可以先注释 width 和 height，代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container Learn',
home: Scaffold(
body: Center(
child: Container(
child: Text(
'margin all 30',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.topLeft,
// width: 500.0,
// height: 400.0,
color: Colors.lightBlue,
// padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
// padding: const EdgeInsets.all(20),
margin: const EdgeInsets.all(30.0),
),
),
),
);
}
}
效果如下：
container 的 decoration#
decoration 可用于设置背景色、背景渐变效果、边框效果等，需要注意 decoration 和 color 不能同时设置，如果需要设置，可以通过在 decoration 中设置 color 来实现，代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container Learn',
home: Scaffold(
body: Center(
child: Container(
child: Text(
'margin all 30',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.topLeft,
width: 500.0,
height: 400,
// color: Colors.lightBlue,
// padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
// padding: const EdgeInsets.all(20),
// margin: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Colors.lightBlue,
Colors.greenAccent,
Colors.purple,
]),
border: Border.all(width: 10.0, color: Colors.red),
color: Colors.lightBlue)),
),
),
);
}
}
效果如下：
报错：#
The following assertion was thrown building MyApp(dirty):
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package/src/widgets/container.dart':
Failed assertion: line 274 pos 15: 'color == null || decoration == null'
报错代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container Learn',
home: Scaffold(
body: Center(
child: Container(
child: Text(
'Container Text',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.topLeft,
color: Colors.lightBlue,
padding: const EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 0.0),
margin: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Colors.lightBlue,
Colors.greenAccent,
Colors.purple,
]),
border: Border.all(width: 10.0, color: Colors.red)),
),
),
),
);
}
}
原因：Container 的 color 和 decoration 不能同时设置，如果需要设置这两个，可以通过设置BoxDecoration(color: color)来实现