【241212】What I have learnt today

Let's summarize the pitfalls I encountered today in Android interfaces💔:

Why is there no color when writing a box

Why does text padding not show color

Why is there a large gap between my block 1 and block 2? How can I make them closer?

Detailed introduction to innerPadding and Scaffold

I. Why is there no color in the box?

Modifiers are shared and overwritten. In Greeting, the modifier of TEXT directly reuses the modifier of Box, causing the background of Text to be covered by the background of Box.

I.为什么box写了没有颜色
Modifier 被共享和覆盖。在 Greeting 中，TEXT的 modifier 直接复用Box 的 modifier，导致 Text 的背景被 Box 的背景覆盖。

II. Why does the text padding not display color?

The padding size is not set, causing the padding to be the same size as the text background by default and be obscured.

II.为什么文本padding不显示颜色
没有设置padding大小，导致padding默认与文本背景大小相同，而被遮挡

III. Why is there a large gap between my block 1 and block 2? How can I make them closer?

Modifier.padding(innerPadding): innerPadding is added to the modifier of each child component. This may be the inner margin provided by Scaffold, causing the spacing to be accumulated.

Default behavior of Box: The contents of each Box are laid out independently, and their spacing depends entirely on the external Modifier.padding().

III.为什么我的块1和块2之间有很大的空隙，如何让它们贴近一点
Modifier.padding(innerPadding)：在每个子组件的 modifier 中添加了 innerPadding，这可能是 Scaffold 提供的内边距，导致间距被累加。

Box 的默认行为：每个 Box 的内容是独立布局的，它们的间距完全取决于外部的 Modifier.padding()。

IV. Detailed introduction to innerPadding and Scaffold

1.Scaffold

A container component in Jetpack Compose for building basic layouts. It provides common application interface structural elements, such as:

• TopBar
• BottomBar
• FloatingActionButton
• DrawerContent

IV. innerPadding和Scaffold的详细介绍
1.Scaffold
Jetpack Compose 中一个用于构建基础布局的容器组件。它提供了常见的应用界面结构元素，例如：

顶部栏 (TopBar)
底部导航 (BottomBar)
浮动操作按钮 (FloatingActionButton)
抽屉菜单 (DrawerContent)

2. innerPadding

When using the areas provided by Scaffold (such as topBar or bottomBar), Scaffold automatically calculates the space occupied by these areas and passes it to content through PaddingValues ​​(usually named innerPadding).

Need to apply innerPadding to the Modifier of the main content area to ensure that the content is not blocked by components such as topBar and bottomBar.

2. innerPadding
当使用 Scaffold 提供的区域（如 topBar 或 bottomBar）时，Scaffold 会自动计算这些区域占用的空间，并通过 PaddingValues（通常命名为 innerPadding）传递给 content。

需要将 innerPadding 应用到主内容区域的 Modifier 上，以确保内容不会被 topBar、bottomBar 等组件遮挡。