Container是Flutter中非常常用的控件,它是一个组合的widget,内部有绘制widget、定位widget、控制widget尺寸。
继承关系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
下图是组合了一些常用属性,演示了一下简单用法。后附代码,并注释。
效果展示
上图代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //去掉AppBar右上角的debug图标
title: "Hello",
home: Scaffold(
appBar: AppBar(title: Text("AppBar Hello")),
body: Center(
child: Container(
alignment: Alignment.center, //控制 Center的child位置显示的
child: new Text("Hello World!",
style: TextStyle(fontSize: 30, color: Colors.redAccent)),
width: 400, //Container 宽度
height: 300, //Container 高度
// padding: const EdgeInsets.all(20), // padding 是Container内部填充,剩下的空间留给child 室内贴砖
padding:
const EdgeInsets.fromLTRB(100, 50, 10, 100), //左上右下 设置各自距离
// margin: const EdgeInsets.all(30), // margin 是Container外部的边厚度,遇到它外边的容器自己缩小 外墙装修
margin: const EdgeInsets.fromLTRB(30, 50, 10, 10),
// color: Colors.lightBlue, //Container 背景颜色
// BoxDecoration ——> LinearGradient 线性渐变
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightGreen, Colors.orange, Colors.white10]),// 填充颜色 指定三种颜色
border: Border.all(color: Colors.yellowAccent, width: 2.5,style: BorderStyle.solid), //指定边框 颜色、宽度、样式
),
transform: new Matrix4.rotationZ(0.3), //Container旋转
)
),
),
);
}
}
以上是Text 与 Containery配合使用,主要理解Containery的属性用法。
这里有一篇文章配图介绍了一部分属性的用法,如果你使搞过Android,应该可以极速理解。因为很多都是相同的,感觉没啥好记录的。也使因为属性太多,只能每个属性简单展示下,具体熟能生巧。