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提供了多个属性来定制容器外观,包括:背景色,边框,阴影等。
相关推荐
星环科技12 分钟前
数据标准Agent ,让企业数据说同一种语言
java·开发语言·前端
写点啥呢15 分钟前
车机 Android 开机优化复盘:我怎么和 AI 一起把问题定位到 SystemUI
android·人工智能
橘子星17 分钟前
深入理解 AJAX 中的 JSON 序列化与 JS 异步处理
前端·javascript·后端
旧曲重听121 分钟前
2026前端技术从「夯」到「拉」
前端·程序人生·职场和发展·软件工程
Kapaseker22 分钟前
我找到了最适合程序员的 PPT 工具 — Slidev
前端
911hzh26 分钟前
Flutter MethodChannel 跨端通信框架 zh_native_channel:快速入门、优势分析与 Pigeon 对比
flutter
雾削木38 分钟前
B语言经典教程现代化重构
java·前端·stm32·单片机·嵌入式硬件
Cobyte40 分钟前
20.Vue Vapor 的应用初始化
前端·javascript·vue.js
乘风gg1 小时前
手把手带你实践历时一年总结的 AI Code Review 最佳工作流!
前端·ai编程·cursor
禅思院1 小时前
POST请求发两次?一次讲透CORS预检机制,面试不再翻车
前端·架构·前端框架