Flutter Container设置padding,margin,背景色,边框

定义:Container是一个组件,当我们需要对基础组件,设置padding,margin,边框,背景色等元素时,就需要通过包裹Container的方式实现。具体如下:

1.magin属性设置:

Dart 复制代码
Container(
  padding:const EdgeInset.all(10),
  child:Text组件,
)

2.padding属性设置:

Dart 复制代码
Container(
  margin:const EdgeInsets.all(10),
  child:Text组件/Image组件,
)

3.边框属性设置:

Dart 复制代码
Container(
  decoration:Boxdecoration(
         border:Border.all(
                color:Color.black,//设置边框颜色
                width:4,  //设置边框宽度
                ),
           borderRadius:BorderRadiu.circular(10),//设置圆角用
       )

)

4.设置背景色:

Dart 复制代码
Container(
  decoration:BoxDecoration(
          color:Color.black,//设置背景色为黑色
        ),
  child:Text组件/Image组件,
)

 ///BoxDecoration提供了多个属性来定制容器外观,包括:背景色,边框,阴影等。
相关推荐
kirk_wang13 小时前
Flutter艺术探索-Flutter异步编程:Future、async/await深度解析
flutter·移动开发·flutter教程·移动开发教程
愚公移码14 小时前
蓝凌EKP产品:关联机制浅析
java·服务器·前端
冬奇Lab14 小时前
【Kotlin系列11】协程原理与实战(下):Flow与Channel驯服异步数据流
android·开发语言·kotlin
_昨日重现14 小时前
Jetpack系列之Compose Scaffold
android·android jetpack
汉堡go14 小时前
python_chapter6
前端·数据库·python
IT陈图图14 小时前
Flutter × OpenHarmony 音乐播放器应用 - 构建录音控制区域
flutter·华为·鸿蒙·openharmony
wusp199414 小时前
v-model 和 :value 的深度解析
前端·javascript·vue.js
2501_9444241214 小时前
Flutter for OpenHarmony游戏集合App实战之记忆翻牌表情图案
开发语言·javascript·flutter·游戏·harmonyos
爱吃大芒果14 小时前
Flutter for OpenHarmony前置知识:Dart 语法核心知识点总结(上)
开发语言·flutter·dart
2501_9444241214 小时前
Flutter for OpenHarmony游戏集合App实战之数字拼图打乱排列
android·开发语言·flutter·游戏·harmonyos