天天看點

學習Flutter之Container控件

class NewGoodsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _NewGoodsState();
  }
}

class _NewGoodsState extends State<NewGoodsPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.centerLeft,
        height: 300.0,//設定為double.infinity可以強制在高度上撐滿
        width: 300.0,//設定為double.infinity可以強制在寬度上撐滿,不設定,則根據child和父節點兩者一起布局。
        decoration: BoxDecoration(//設定了decoration的話,就必須設定color屬性,否則會報錯
            color: Colors.black26,//背景顔色
            border: Border.all(color: Colors.red, width: 2.0),//邊框顔色 以及邊框的寬
            borderRadius: BorderRadius.all(Radius.circular(150))),//邊框的圓角 尺寸足夠大,可繪制成圓
        margin: EdgeInsets.all(12),//表示Container 與外部其他元件的距離
        padding: EdgeInsets.all(6),//内邊距,指Container 邊緣與Child之間的距離
        transform:Matrix4.translationValues(20, -100, 5) ,//讓Container 進行一系列旋轉之類的
        child: Text("container 中的字控件")//container中的内容widget
      ),
    );
  }
}