Flutter UI Widget介绍—Container

最新推荐文章于 2024-09-16 20:13:32 发布

weixin_66477591

最新推荐文章于 2024-09-16 20:13:32 发布

阅读量177

点赞数 2

分类专栏： Flutter UI Widget 文章标签： flutter 前端 html

本文链接：https://blog.csdn.net/weixin_66477591/article/details/137088582

版权

Flutter UI Widget 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

对Container widget的用法进行一些简单的介绍。

Container就是一个相当于一个箱子，里面可以放各种内容。
Container里面的内容放在child属性里。
想要给Container添加内边距，就用padding属性。
想要给Container添加外边距，用margin属性。
需要给Container盒子的内容设置长，宽的最大或者最小边界值，可以用constraints属性。
如果需要给Container设置圆形边角，可以用decoration属性。
boxShadow用于给Container添加阴影。这个用到的比较少。

body: Center(
          child: Container(
            color: Colors.blue,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.red,
              alignment: Alignment.center,
              padding: const EdgeInsets.all(10),
              margin: const EdgeInsets.all(20),
              constraints: const BoxConstraints(
                maxWidth: 100,
                minWidth: 300
              ),
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(50),
                gradient: const LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.red,
                    Colors.blue
                  ]
                ),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black,
                    spreadRadius: 2,
                    blurRadius: 10,
                    offset: Offset(10, 50)
                  )
                ]
              ),
              child: const Text('test')
            ),
          )
        ),