Flutter基础组件_Container

下面的部分属性可在其他一些widget中通用

color

• 设置背景色

color: Colors.red

---

alignment

• 设置child的相对位置

//居中对齐的三种表现方式
alignment: Alignment.center
alignment: Alignment(0.0, 0.0)
alignment: FractionalOffset(0.5, 0.5),

---

constraints

• 用于设置 最大&最小 宽高

constraints: BoxConstraints(
          maxHeight: 300,
          maxWidth: 200,
          minWidth: 150,
          minHeight: 150,
        )

---

margin & padding

• 设置 外边距 & 内边距

//同时设置四边距
margin: EdgeInsets.all(20),
//分别设置四边距
margin:EdgeInsets.fromLTRB(20, 10, 20, 10)
//单独设置某几个边距
margin: EdgeInsets.only(left: 10, bottom: 20),

padding同上

---

decoration

• 设置装饰 , 与container的color属性不能同时设置

decoration: BoxDecoration(

	//设置container的背景色
    color: Colors.blue,
    
    //设置边框
    border: Border.all(
    //边框颜色
     color: Colors.pink, 
     //边框宽度
     width: 14, 
     //边框样式
     style: BorderStyle.solid),
     
    //设置圆角 (当设置的圆角等于宽高的一半时,则为圆形)
    borderRadius: BorderRadius.all(Radius.circular(50))));

---

child

• 设置子组件, container通过包裹child组件来为child添加宽高样式等属性

child: Text("hello flutter")

---

width & height

• 为其child设置显示区域

height: 100,
width: 100,

示例

//Container示例
class ContainerBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        //设置背景色
//        color: Colors.red,

        //设置子布局 (如果Container里面没有子控件，它就会填充整个屏幕；如果有子控件，Container就会自动适应子控件大小。)
        child: Text("hello flutter"),

        //控制child的位置(如果container没有设置宽高,则container会充满父布局)
        //alignment: Alignment.center,
        //效果和上面等同,可以进一步设置x轴和y轴的比例
        alignment: Alignment(0.0, 0.0),
        //此方案和上面效果相同,只不过坐标系存在区别
//      alignment: FractionalOffset(0.5, 0.5),

        //宽高 (宽高设置后,会使child的宽高设置失效)
        height: 100,
        width: 100,

        //设置最大最小宽高
        constraints: BoxConstraints(
          maxHeight: 300,
          maxWidth: 200,
          minWidth: 150,
          minHeight: 150,
        ),
        //如果存在child且仍需要满屏,设置如下
        //constraints: BoxConstraints.expand()

        //设置margin; (设置padding同理)
        margin: EdgeInsets.all(20),
//      margin:EdgeInsets.fromLTRB(20, 10, 20, 10)
//      margin: EdgeInsets.only(left: 10, bottom: 20),

        //设置边框, !!! 此属性与color属性冲突,不可同时设置
        decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(
                color: Colors.pink, width: 14, style: BorderStyle.solid),

            //设置圆角 (当设置的圆角等于宽高的一半时,则为圆形)
            borderRadius: BorderRadius.all(Radius.circular(50))));
  }
}