介紹

建立無縫的一維佈局在 Web 開發(fā)中通常具有挑戰(zhàn)性，但 MUI Stack 使其變得簡單。 MUI 是一個強(qiáng)大的 React 元件庫，它提供 Stack 元件作為管理垂直和水平排列的有效工具，而無需深入研究 Flexbox 或自訂 CSS。本指南將幫助您了解 MUI Stack 從設(shè)定到實(shí)際使用的基本知識，以增強(qiáng)您在 React 中的佈局建立體驗(yàn)。

MUI 堆疊入門

要開始使用 MUI Stack 建置佈局，請確保安裝了必要的 MUI 軟體包。 MUI 的 Stack 元件依賴三個主要套件：

• @mui/material：這是包含所有 MUI 元件的核心包，包括 Stack。
• @emotion/react 和 @emotion/styled：MUI 預(yù)設(shè)使用 Emotion 進(jìn)行樣式設(shè)置，這些套件可以無縫自訂元件樣式。

安裝

在終端機(jī)中執(zhí)行以下命令來安裝所需的軟體包：

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

此步驟將為您實(shí)現(xiàn)具有所有必要依賴項(xiàng)的 MUI Stack 做好準(zhǔn)備。 （包括終端安裝過程的螢?zāi)唤貓D，以供快速視覺參考。）

MUI 堆疊的基本設(shè)置

安裝完軟體包後，您就可以將 Stack 合併到您的專案中了。讓我們完成初始設(shè)定：

導(dǎo)入和使用堆疊

首先，在 React 元件檔案中匯入 Stack 元件：

import Stack from '@mui/material/Stack';

配置堆疊方向

方向?qū)傩允?MUI Stack 的核心，可讓您輕鬆設(shè)定水平或垂直排列。預(yù)設(shè)情況下，Stack 將其子元素排列在垂直列中，這非常適合從上到下堆疊元素。對於水平佈局，將方向切換為“行”。

這是一個範(fàn)例：

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;

在此程式碼中，direction="row" 水平並排排列項(xiàng)目，每個項(xiàng)目之間有間距。此設(shè)定有助於建立功能表列、項(xiàng)目清單或任何想要以行格式顯示的元素。

有了這個基礎(chǔ)，MUI Stack 就可以簡化您的版面建置體驗(yàn)。請繼續(xù)關(guān)注我們深入探討配置、間距和響應(yīng)式佈局。

配置間距和響應(yīng)能力

有效的間距是創(chuàng)建具有視覺吸引力的佈局的關(guān)鍵，而 MUI Stack 可以輕鬆調(diào)整元素之間的間距。使用間距屬性，您可以定義子元素之間一致的間隙，可以是固定值，也可以回應(yīng)螢?zāi)怀叽纭?

間距

要設(shè)定固定間距，只需使用具有數(shù)值的間距屬性即可。例如，spacing={2} 將在所有子項(xiàng)之間添加統(tǒng)一的間隙：

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

在這裡，Stack 中的每個項(xiàng)目之間都有固定的間隙，從而創(chuàng)建均勻間隔、乾淨(jìng)的佈局。

響應(yīng)式間距

MUI Stack 還允許透過將物件傳遞給間距屬性來實(shí)現(xiàn)響應(yīng)式間距。這可以根據(jù)螢?zāi)怀叽鐢帱c(diǎn)（例如，xs、sm、md）啟用不同的間距值：

import Stack from '@mui/material/Stack';

在此範(fàn)例中，間距在較小的螢?zāi)簧蠒?，在較大的螢?zāi)簧蠒鼘挘詣诱{(diào)整以獲得最佳的可讀性。

另一個有用的功能是 Stack 能夠響應(yīng)式調(diào)整方向，幫助您的佈局適應(yīng)各種螢?zāi)怀叽纭？梢酝高^設(shè)定direction={{ xs: "column", sm: "row" }}:
為不同的斷點(diǎn)指定不同的方向

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;

在此設(shè)定中，項(xiàng)目在超小螢?zāi)唬ɡ缡謾C(jī)）上排列成列，並在小螢?zāi)唬ɡ缙桨咫娔X）和更大螢?zāi)簧锨袚Q為行佈局。

增強(qiáng)的佈局定制

MUI Stack 提供了多個自訂選項(xiàng)，用於建立更複雜、更精美的佈局。讓我們探索如何使用分隔線和對齊設(shè)定來進(jìn)一步優(yōu)化佈局。

新增分隔線

divider 屬性可讓您在 Stack 項(xiàng)目之間插入視覺分隔符號。這對於清晰分隔清單、導(dǎo)覽功能表或按鈕組中的元素特別有用。

<Stack direction="row" spacing={2}>
  <Typography variant="body1">Item 1</Typography>
  <Typography variant="body1">Item 2</Typography>
  <Typography variant="body1">Item 3</Typography>
</Stack>

在此範(fàn)例中，行佈局中的每個項(xiàng)目之間放置了一個垂直分隔線，從而增強(qiáng)了可讀性和結(jié)構(gòu)。如果堆疊方向設(shè)定為列，您也可以將方向設(shè)定為水平。

理由和對齊

為了精確定位 Stack 項(xiàng)目，MUI Stack 支援 justifyContent 和alignItems 屬性，它們分別控制沿主軸和交叉軸的對齊方式：

• justifyContent：沿主軸對齊項(xiàng)目（如果方向=「行」則水平對齊；如果方向=「列」則垂直）。
• alignItems：沿交叉軸對齊項(xiàng)目（如果方向=「行」則垂直；如果方向=「列」則水平）。

範(fàn)例：

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

在此設(shè)定中， justifyContent="center" 將項(xiàng)目沿主軸居中，而alignItems="center" 將它們沿橫軸居中，從而形成整齊居中的佈局。這種靈活性使您能夠創(chuàng)建適應(yīng)不同螢?zāi)怀叽鐏K保持視覺和諧的佈局。

使用系統(tǒng)道具進(jìn)行自訂樣式

MUI Stack 支援系統(tǒng)屬性，它們是方便的樣式屬性，可讓您直接在元件上套用邊距、填充和其他與版面相關(guān)的 CSS。系統(tǒng)道具消除了對額外 CSS 檔案的需求，使您能夠管理元件內(nèi)的樣式，保持程式碼組織有序且有效率。

例如，若要在 Stack 周圍新增內(nèi)邊距或在 Stack 與其他元素之間新增邊距，您可以直接設(shè)定 p (padding) 或 m (margin) 屬性：

import Stack from '@mui/material/Stack';

在此範(fàn)例中，p={2} 在 Stack 周圍新增內(nèi)部填充，而 m={3} 在 Stack 和頁面上的其他元素之間建立外部邊距。您可以使用這些速記系統(tǒng)道具進(jìn)行各種調(diào)整，包括邊距 (m)、填充 (p)、寬度 (width) 和高度 (height)，無需額外的 CSS 程式碼即可提供重要的佈局控制。

七、結(jié)論

MUI Stack 是一個高度靈活且高效的元件，用於管理 React 中的一維佈局。透過簡化元素的對齊、間距和回應(yīng)能力，Stack 減少了對自訂 CSS 的需求並加速了開發(fā)流程。

透過系統(tǒng)屬性控制佈局方向、間距和樣式的能力使 MUI Stack 成為任何重視乾淨(jìng)且可維護(hù)程式碼的專案的強(qiáng)大補(bǔ)充。無論您是建立簡單的導(dǎo)覽列還是複雜的響應(yīng)式佈局，MUI Stack 都提供了一種簡化的方式來建立 UI。

隨意探索其他 MUI 文檔，以解鎖更多自訂選項(xiàng)，例如高級系統(tǒng)道具、響應(yīng)式設(shè)計(jì)增強(qiáng)功能以及將 Stack 與其他 MUI 元件整合以獲得全面的佈局解決方案。

以上是MUI Stack：掌握 React 中的一維佈局的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！