Flutter基础(前端教程①⑨-margin-padding)

比喻:把框的盒子

Container 想象成一个带边框的盒子

  • margin盒子外面的空白(盒子与周围其他东西的距离)。
  • padding盒子里面的空白(盒子边框与内部内容的距离)。

代码示例(带边框更直观):

Dart 复制代码
Container(
  // 盒子外部的空白(与其他组件的距离)
  margin: EdgeInsets.all(20), 
  // 盒子内部的空白(边框与文本的距离)
  padding: EdgeInsets.all(15),
  // 给盒子加个边框,方便看清
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2), // 黑色边框
    color: Colors.yellow, // 盒子背景色
  ),
  child: Text("我是内部文本"),
)
相关推荐
一 乐3 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
C_心欲无痕3 小时前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫3 小时前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo4 小时前
前端跨页面通信终极指南:方案拆解、对比分析
前端
yinuo4 小时前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
xkxnq5 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
烛阴5 小时前
拒绝配置地狱!5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
xkxnq5 小时前
第一阶段:Vue 基础入门(第 15天)
前端·javascript·vue.js
anyup7 小时前
2026第一站:分享我在高德大赛现场学到的技术、产品与心得
前端·架构·harmonyos
BBBBBAAAAAi7 小时前
Claude Code安装记录
开发语言·前端·javascript