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("我是内部文本"),
)
相关推荐
林深现海10 分钟前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多24 分钟前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界27 分钟前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
文艺理科生28 分钟前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构
千寻girling29 分钟前
主管:”人家 Node 框架都用 Nest.js 了 , 你怎么还在用 Express ?“
前端·后端·面试
C澒38 分钟前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
清山博客1 小时前
OpenCV 人脸识别和比对工具
前端·webpack·node.js
要加油哦~1 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
程序员Sunday1 小时前
说点不一样的。GPT-5.3 与 Claude Opus 4.6 同时炸场,前端变天了?
前端·gpt·状态模式
yq1982043011561 小时前
静思书屋:基于Java Web技术栈构建高性能图书信息平台实践
java·开发语言·前端