Flutter 中的布局概念
在 Flutter 中，布局是指将组件放置到屏幕上的过程。Flutter 的布局系统基于一系列的 Widget 类，这些类可以嵌套并组合成复杂的用户界面。Flutter 提供了多种内置的布局控件，如 Column、Row、Stack 等，它们能够帮助开发者轻松实现各种布局需求。
基础布局控件
Column - 垂直布局
Column 是一种垂直排列子元素的布局方式。它的子元素会从上到下依次排列。
-- -------------------- ---- -------
------ --------------------------------
---- ------ -
----------------
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
----- ---------
------- ------------- ------------ --------
----- -------
--------- -
---------------- ----------- ------- ----
---------------- ------------- ------- ----
---------------- ------------ ------- ----
--
--
--
--
-
-Row - 水平布局
Row 是一种水平排列子元素的布局方式。它的子元素会从左到右依次排列。
-- -------------------- ---- -------
------ --------------------------------
---- ------ -
----------------
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
----- ---------
------- ------------- --------- --------
----- ----
--------- -
---------------- ----------- ------ ----
---------------- ------------- ------ ----
---------------- ------------ ------ ----
--
--
--
--
-
-Stack - 层叠布局
Stack 允许子元素重叠在一起。通过使用 Positioned 控件，可以控制每个子元素的具体位置。
-- -------------------- ---- -------
------ --------------------------------
---- ------ -
----------------
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
----- ---------
------- ------------- ----------- --------
----- ------
--------- -
--------------- --- ----- --- ------ ---------------- --- ------- --- ------ -------------
--------------- --- ----- --- ------ ---------------- --- ------- --- ------ ---------------
--------------- --- ----- --- ------ ---------------- --- ------- --- ------ --------------
--
--
--
--
-
-Flex 布局
Flex 布局是一种更灵活的布局方式，它允许子元素根据可用空间自动调整大小。
Expanded - 扩展子元素
Expanded 可以让其子元素占据剩余的空间。通常与 Row 或 Column 结合使用。
-- -------------------- ---- -------
------ --------------------------------
---- ------ -
----------------
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
----- ---------
------- ------------- -------------- --------
----- ----
--------- -
---------------- ----------- ------ ----
--------------- ---------------- ---------------
---------------- ------------ ------ ----
--
--
--
--
-
-Flexible - 灵活子元素
Flexible 和 Expanded 类似，但它允许子元素按比例分配剩余空间。
-- -------------------- ---- -------
------ --------------------------------
---- ------ -
----------------
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
----- ---------
------- ------------- -------------- --------
----- ----
--------- -
-------------- -- ------ ---------------- -------------
-------------- -- ------ ---------------- ---------------
-------------- -- ------ ---------------- --------------
--
--
--
--
-
-自定义布局
除了使用内置的布局控件外，Flutter 还提供了自定义布局的方式，例如 CustomSingleChildLayout 和 CustomMultiChildLayout。这些控件允许开发者根据需要实现复杂的布局逻辑。
CustomSingleChildLayout
CustomSingleChildLayout 用于单个子元素的复杂布局。
-- -------------------- ---- -------
------ --------------------------------
----- ----------------------- ------- -------------- -
---------
----------------------------- ------------- -- --------------------------------
-
----- ----------------------------- ------- ------------------------------ -
---------
------ ------------------ -------- -
------ ---------
------- ------------- ----------------------------- ------
----- ------------------------
--------- ------------------------------
------ ---------------- ------------ ------ ---- ------- -----
--
--
-
-
----- --------------------------- ------- ------------------------- -
---------
-------------- ------------------------------------- ------------ -
------ ---------------------------------------
-
---------
------ ------------------------ ----- ---- ---------- -
------ ------------------ - ---------------- - -- ------------ - ----------------- - ---
-
---------
---- ------------------------ ------------------------- ------------ -
------ ------
-
-
---- ------ -
------------------------ ----------------------------
-CustomMultiChildLayout
CustomMultiChildLayout 用于多个子元素的复杂布局。
-- -------------------- ---- -------
------ --------------------------------
----- ---------------------- ------- -------------- -
---------
---------------------------- ------------- -- -------------------------------
-
----- ---------------------------- ------- ----------------------------- -
---------
------ ------------------ -------- -
------ ---------
------- ------------- ---------------------------- ------
----- -----------------------
--------- -----------------------------
--------- -
------------ ------ ------ ---------------- ----------- ------ --- ------- -----
------------ -------- ------ ---------------- ------------- ------ --- ------- -----
------------ ------- ------ ---------------- ------------ ------ --- ------- -----
--
--
--
-
-
----- -------------------------- ------- ------------------------ -
---------
---- ------------------ ----- -
-- ----------------- -
------------------ ---------------------------------------
-------------------- ------------------ - --- - -- ------------ - --- - ----
-
-- ------------------- -
-------------------- ---------------------------------------
---------------------- ------------------ - --- - -- ------------ - --- - ----
-
-- ------------------ -
------------------- ---------------------------------------
--------------------- ------------------ - --- - -- ------------ - --- - - - ----
-
-
---------
---- ------------------------ ------------------------ ------------ -
------ ------
-
-
---- ------ -
------------------------ ---------------------------
-以上介绍了 Flutter 中的一些基础和进阶的布局方法。理解这些布局控件的使用，可以帮助开发者构建出更加美观且功能强大的用户界面。