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提供了多个属性来定制容器外观,包括:背景色,边框,阴影等。
相关推荐
一只大侠的侠4 小时前
React Native开源鸿蒙跨平台训练营 Day18自定义useForm表单管理实战实现
flutter·开源·harmonyos
一只大侠的侠4 小时前
React Native开源鸿蒙跨平台训练营 Day20自定义 useValidator 实现高性能表单验证
flutter·开源·harmonyos
renke33644 小时前
Flutter for OpenHarmony:节奏方块 - 基于时间同步与连击机制的实时音乐游戏系统设计
flutter·游戏
朱昆鹏5 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek5 小时前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端
山水域5 小时前
SKAdNetwork 6.0 深度实战:多窗口转化值(Conversion Value)建模与数据分层架构
ios
永远是我的最爱5 小时前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
晚霞的不甘5 小时前
Flutter for OpenHarmony 可视化教学:A* 寻路算法的交互式演示
人工智能·算法·flutter·架构·开源·音视频
从文处安5 小时前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
doupoa5 小时前
内存指针是什么?为什么指针还要有偏移量?
android·c++