Flutter组件基础——Container
原创
Flutter组件基础——Container
Container是容器组件，类似于H5中的<div>标签，亦或者iOS中的UIView，是布局的基础控件。
<!--more-->
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,
),
),
),
);
}
}效果图如下：
<!-- <center>
<figure>
<img src="https://inews.gtimg.com/newsapp_ls/0/13784407980/0.png" style="width:200px" />
<img src="https://inews.gtimg.com/newsapp_ls/0/13784409192/0.png" style="width:200px" />
<img src="https://inews.gtimg.com/newsapp_ls/0/13784409177/0.png" style="width:200px" />
</figure>
</center> -->
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),
),
),
),
);
}
}显示效果如下：
<!-- <img src="https://inews.gtimg.com/newsapp_ls/0/13786616617/0.png" style="width:200px" /> -->
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),
),
),
),
);
}
}效果如下：
<!-- <img src="https://inews.gtimg.com/newsapp_ls/0/13786645730/0.png" style="width:200px" /> -->
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)),
),
),
);
}
}效果如下：
<!-- <img src="https://inews.gtimg.com/newsapp_ls/0/13786743071/0.png" style="width:200px" /> -->
报错：
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:flutter/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)来实现
参考
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
