Flutter Container、Center设置控件居中背景及其他属性

弯弯的小溪

已于 2022-06-21 13:49:38 修改

阅读量4k

点赞数 1

文章标签： flutter android ios

于 2022-06-09 14:39:57 首次发布

原文链接：https://blog.csdn.net/qq_30005223/article/details/122718656

版权

Flutter Container、Center设置控件居中背景及其他属性

//控件可以居中
 Container(
      alignment: Alignment.bottomCenter,//设置控件内容的位置
      padding: const EdgeInsets.all(20),//设置内边距
      margin: const EdgeInsets.all(30),//设置整体浮动
      color: Colors.teal,//背景色，注意不能和decoration的color同时使用
      //设置其更多装饰属性（这些属性会绘制在被包裹的控件后面）,
      decoration: const BoxDecoration(
      //背景色
      color: Colors.amber,
             //圆角
             borderRadius:BorderRadius.all(Radius.circular(20)),
             //阴影
              boxShadow: [
	                 BoxShadow(
	                  //阴影颜色
	                  color: Colors.deepOrangeAccent,
	                   //阴影偏移量
	                   offset: Offset(10, 10),
	                   //阴影模糊程度
	                    blurRadius: 10,
	                    //阴影扩散程度
	                    spreadRadius: 10)
              ]),
        //设置其更多装饰属性（这些属性会绘制在被包裹的控件前面）,
       foregroundDecoration:BoxDecoration()
       child: const Text('啊哈哈哈哈'),
      
)
//默认让控件居中显示
 Center(
        widthFactor: 100,
        heightFactor: 100,
        child: Text('========='),
)

Flutter Container、Center设置控件居中背景及其他属性_Good Weking的博客-CSDN博客_flutter 控件居中

如何给 Container 四周设置圆角以及给某一角设置圆角

Container 组件有一个属性 BoxDecoration ，可以用来修改样式

1、给 Container 四周设置圆角

可以使用 BorderRadius.all 实现，如下代码所示

 Container(
   decoration: BoxDecoration(
     borderRadius: BorderRadius.all(Radius.circular(30)),
   ),
),

2、给 Container 某一角设置圆角

可以使用 BorderRadius.only 实现，如下代码所示

 Container(
   decoration: BoxDecoration(
     borderRadius: BorderRadius.only(
       topLeft: Radius.circular(30),
       bottomRight: Radius.circular(30),
     ),
  ),
),

两者的效果图如下所示