很多初学者第一次做页面时，最容易犯的一个错，就是把尺寸写死。宽度写成固定值，首屏看着没问题，换个设备就开始挤；横竖屏一切，比例又乱；到了平板或更宽的窗口里，本来应该拉开的内容还是挤在一小块地方。这篇案例虽然名字里带的是Image当容器大小变化时，内容区域该怎么分配宽度。如果你后面要做图片卡片区、响应式相册、媒体列表或者多端适配页，这篇会很有用。响应式布局这件事，说白了就是别让页面只在一种尺寸下好看

学习Popup不能只停留在“弹出一段提示文字”。真正进入业务场景后，浮层往往承载的是一块小型信息卡片，比如用户详情、商品摘要、审批说明、头像资料等。只要内容不需要彻底打断主流程，Popup就非常适合承接这种局部信息展示。这个案例用一张用户信息卡片，演示了怎样通过@Builder自定义 Popup 内容，让浮层真正具备业务表达能力。Popup 不只是提示层，也可以是轻量信息卡片。只要内容规模控制得当

很多人刚接触Popup时，会默认把它理解成“只能看、不能点”的提示层。其实并不是。只要内容规模合适，Popup 完全可以承载简单交互，比如菜单选择、标签切换、快速筛选、局部操作等。这个案例就展示了一个非常实用的形态：点击按钮后弹出标签菜单，用户在浮层内完成选择，结果立刻回写到主界面。Popup 不只是展示说明，也可以承载简单而高频的局部交互。只要你控制好内容规模和操作链路，它会成为非常高效的一种界

好的提示不是“永远都在”，而是该出现的时候出现，不该出现的时候立刻退场。这正是条件控制型Popup的价值。它特别适合做输入提示、校验反馈、功能说明和上下文引导。这个案例把两类常见需求放在一起：一类是点击问号查看说明，另一类是输入内容后自动出现校验提示。前者是主动触发，后者是条件触发，正好能把 Popup 的两种典型打开方式讲透。这个案例把Popup从“点击后显示”进一步推进到了“根据状态动态显示”

Popup最大的特点之一，就是它和触发组件有明确的空间关系。它不是简单地“出现在屏幕上”，而是可以出现在组件上方、下方、左侧或右侧。这个位置关系决定了用户是否能快速理解“这块浮层是在解释谁、服务谁”。这个案例通过四个方向按钮，把Placement的常见取值一次讲清楚，特别适合做 Popup 位置能力的入门训练。这个案例把Popup的方向能力拆得很直白。位置不是装饰，而是上下文关系的一部分。当浮层方

如果说弹窗更像“暂停当前流程”，那Popup更像“贴着某个组件冒出来的一小块信息层”。它不会像对话框那样把页面整体打断，而是围绕触发源做局部信息补充，因此特别适合说明、辅助、悬浮菜单和快速提示。这个案例是学习Popup的第一步。它同时演示了基础浮层和带箭头浮层，帮助你理解的核心用法。这个案例帮你建立了Popup它是一个依附于触发组件的轻量浮层，而不是全局弹窗。理解这一点后，你再去做位置控制、自定义

系统原生Toast很方便，但它的样式能力有限。如果你想做品牌色成功提示、错误提示、带图标提示，或者需要更贴近业务视觉体系的反馈样式，单靠原生Toast往往不够。这时就需要自己模拟一个“Toast 式浮层”。这个案例的价值正在这里：它不是教你替代原生能力，而是教你在必要时用Stack + 状态控制 + 定时隐藏的方式，做出更自由的轻提示展示。当系统轻提示不够用时，如何自己搭一个轻量浮层反馈组件。掌握

默认情况下，Toast会出现在靠近底部的位置。这对大多数场景已经够用，但当页面结构复杂、底部有导航栏，或者你想让提示更接近操作区域时，位置控制就变得非常重要。这个案例集中演示顶部、中间和底部三种位置写法，适合用来理解bottom参数的实际含义。这个案例说明了Toast不只是能不能显示，还包括显示在哪里更合理。位置控制本身不复杂，关键在于你是否能根据页面结构做出克制而稳定的选择。

同样是提示信息，显示 1 秒、2 秒还是 3 秒，用户的感受差别其实很大。太短，用户来不及看；太长，又会显得拖沓。Toast的时长设置看似只是一个数字，背后其实对应的是信息优先级和阅读负担。这个案例把不同显示时长放在一个页面里做并列演示，非常适合拿来建立一套项目内的提示规范。这个案例真正讲的不是四个按钮，而是如何给轻提示设定合理停留时间。一旦你把时长和信息等级对应起来，Toast 就不再是随手一写

很多页面并不需要一个正式弹窗。用户完成保存、复制成功、网络恢复、表单已提交，这类反馈只需要轻轻告诉用户“事情已经发生了”，不应该打断主流程。Toast就是最适合承担这类即时反馈的能力。这个案例非常基础，但基础恰恰最重要。因为很多项目把所有反馈都做成弹窗，结果页面动不动就被遮住，用户操作节奏被频繁打断。掌握Toast的边界，能直接改善产品体验。Toast看上去只是个很小的能力，但它决定了很多细节体验