Flutter 学习笔记 (二) Container 组件

一个拥有绘制、定位、调整大小的 widget。是一个容器组件，内部可以包含其他的 widget

容器内的组件在容器内的对齐方式。可选值有：

限制子节点的宽高。属性是一个 BoxConstraints 对象

设置容器的背景色

在子节点下方装饰。可以设置边框。设置背景色
当设置边框后,子节点会自动调整位置。
属性是一个 Decoration 对象.

在子节点上方设置装饰,比如边框,背景色。
当设置边框后,子节点不会调整位置,有可能会被边框覆盖。

内边距和外边距,参见 HTML 的盒子模型
属性是一个 EdgeInsetsGeometry 对象

设置容器组件的装饰.因为这是一个抽象类,不能直接使用,可以使用它的子类 BoxDecoration

设置容器的背景色。所以这个属性与 Container 组件的 color 属性冲突.

设置字体颜设置背景图片

设置边框。属性是一个 Border 对象,可以设置上下左右四个方向的边框的宽度和颜色.

填充背景色时使用的渐变方式。有三个取值

import 'package:flutter/material.dart';import 'ContainerDemo.dart';void main() => runApp(ContainerDemo());
class ContainerDemo extends StatelessWidget {  @override  Widget build(BuildContext context) {    var boxConstraints = BoxConstraints.expand(height: 311,width: 311);    var background = Paint();    background.color = Colors.green;    var edgeInset =EdgeInsets.only(left: 110,right: 100,bottom: 100,top: 200);    var gradColorList =List<Color>();    gradColorList.add(Colors.blueAccent);    gradColorList.add(Colors.orange);    gradColorList.add(Colors.white);    gradColorList.add(Colors.white);
    var linear =LinearGradient(        colors: gradColorList,        begin: Alignment.bottomRight    );
    var radial = RadialGradient(      colors: gradColorList,      radius: 2,
    );    var sweep = SweepGradient(      colors: gradColorList,      //startAngle:,      endAngle:7,      center: Alignment.center    );
    var decoraion = BoxDecoration(      color: Colors.pinkAccent,      border: Border(        top: BorderSide(width: 50,color: Colors.lightGreen),        right: BorderSide(width: 20,color: Colors.pink),        left: BorderSide(width: 30,color: Colors.teal),        bottom:BorderSide(width: 30,color: Colors.lightGreen),      ),      gradient: sweep      );
          return MaterialApp(        title: 'Container Demo',        home: Scaffold(          body: Center(            child: Container(              child: Text('hello Container',style: TextStyle(                fontSize: 22,                background: background                )),              constraints:boxConstraints,              //color: Colors.blueGrey,              //在子节点下方绘制,子节点会调整位置              decoration: decoraion,              //在子节点上方绘制,子节点不动,可能会被覆盖              //foregroundDecoration :decoraion,              padding: edgeInset,              //margin: edgeInset,              alignment: Alignment.bottomCenter,            ),          ),        ),      );  }}