学习Flutter之Container控件

最新推荐文章于 2022-11-26 11:00:32 发布

hgyixf

最新推荐文章于 2022-11-26 11:00:32 发布

阅读量173

点赞数

分类专栏： Flutter android 文章标签： Flutter Container

本文链接：https://blog.youkuaiyun.com/hgyxfnnii/article/details/100173910

版权

android 同时被 2 个专栏收录

7 篇文章

订阅专栏

Flutter

2 篇文章

订阅专栏

本文深入探讨了Flutter中Container组件的使用方法与特性，包括如何设置背景颜色、边框样式、圆角、内外边距以及变换效果，展示了Container的灵活性与强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
      ),
    );
  }
}