Material Design 是 Google 推出的一种设计语言，旨在提供一种一致的设计风格，以便于用户在各种设备上使用不同的应用程序时，可以得到一致的体验。在 Material Design 中，控件的组合规范是一项非常重要的设计准则，控件的组合规范可以帮助开发人员创建出更加符合用户使用习惯的 UI 界面，提高用户对应用程序的体验和满意度。
1. 控件间距
在 Material Design 中，控件之间的间距相对固定，大多数情况下使用 8dp 或更大的间距。这种间距可以让用户更加清晰的分辨各个控件之间的界限，同时也让 UI 界面看起来更加有组织和整洁。
-- -------------------- ---- -------
---- ------------------------
---- -------------------------------
---- ---------------------------- -------------------------------
------ --------------------- --------------------------
----- ----------------------------
----- --------------------------------------------
----- ---------------------------------------------
-------
------ ----------- ----------------------------- -------------------
----- ------------------------------------------
--------
------
---- ---------------------------- -------------------------------
------ --------------------- --------------------------
----- ----------------------------
----- --------------------------------------------
----- ---------------------------------------------
-------
------ ----------- ----------------------------- -------------------
----- ------------------------------------------
--------
------
------
------2. 按钮和输入框
在 Material Design 中，按钮和输入框的组合是比较常见的。在输入框后添加一个按钮，用户可以通过点击按钮来触发一些操作。为了让这种组合看起来更加整洁，可以将输入框和按钮分别放到两个容器中，并使用弹性布局来控制它们的位置关系。在这种组合中通常需要注意以下几个点：
- 普通按钮通常设置为「文本」或者「轮廓」的样式。
- 输入框通常设置为「轮廓」的样式。
- 按钮和输入框之间的间距通常为 8dp。
-- -------------------- ---- -------
---- ------------------------
---- -------------------------------
---- ---------------------------- -------------------------------
---- --------------------- --------------------------
------ ----------- ----------------------------- -------------------
---- ----------------------------
---- -------------------------------------------
---- -----------------------------------
------ ----------------------------------------
------
---- --------------------------------------------
------
------
------
---- ---------------------------- -------------------------------
---- ----------------- ----------------------
----- ---------------------------------------
------
------
------
------3. 文字和图标按钮
文字和图标按钮是 Material Design 中另外一种比较常见的控件组合。在这种组合中，通常将文字和图标放在同一个容器中，以便于用户更加清楚地了解按钮所代表的含义。在这种组合中通常需要注意以下几个点：
- 按钮通常设置为「文本」或者「平面」的样式。
- 图标通常放在文本的左边或者右边。
- 文字和图标之间的间距通常为 8dp。
-- -------------------- ---- -------
---- ------------------------
---- -------------------------------
---- ---------------------------- --------------------------------
------- ----------------- ----------------------
-- --------------------- ----------------- -------------------------------
----- ---------------------------------------
---------
------
------
------4. 进度条和信息提示
在某些情况下，需要向用户展示一些进度条和信息提示，来告知用户当前操作的状态。在 Material Design 中，进度条和信息提示通常被放在同一个容器中。在这种组合中通常需要注意以下几个点：
- 进度条和信息提示通常被放在同一个容器中，并且居中显示。
- 进度条通常使用线性进度条的样式。
- 信息提示通常使用 badge 的样式。
-- -------------------- ---- -------
---- ------------------------
---- -------------------------------
---- ---------------------------- --------------------------------
---- -------------------------- ------------------------------------
---- --------------------------------------------------
---- ------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------
----- --------------------------------
------
------
------5. 总结
控件组合是 Material Design 中非常重要的设计准则之一，在实际的应用中应该根据不同的需求和场景来选择合适的控件组合方式，以提高用户对应用程序的体验和满意度。以上就是 Material Design 中的控件组合规范的详细解释及示例代码，希望可以对前端开发人员提供一些指导和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d8e3d48841e9894be15f5