Chapter 18無料公開

VStack / HStackもどんどん使おう(コンポーネントレイアウト編)

terrierscript
terrierscript
2021.05.08に更新

Stackはリストだけでなく、普通の要素の組み合わせにも便利です

ちょっとした要素の組み合わせであればHStack/VStackも組み合わせて使うと良いでしょう。

例えばコメント表示のようなものを作る場合、Boxではこのような具合になります

// Boxバージョン
const CommentItem = () => {
  return <Box display="flex" flexDirection="row">
    <Avatar />
    <Box>
      <Heading size="sm">Some member</Heading>
      <Box>あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波</Box>
    </Box>
  </Box>
}

これを下記のように置換出来ます。

// HStackバージョン
const CommentItem = () => {
  return <HStack>
    <Avatar />
    <Stack> {/* <VStack align="start"> でもOK*/}
      <Heading size="sm">Some member</Heading>
      <Box>あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波</Box>
    </Stack>
  </HStack>
}

すっぴんの状態でも、、spaceをつけてくれるためこのぐらい違います。

captrue

Chromeのinspectorでgridを表示するとよりわかりやすいでしょう

captrue-grid

HStack, VStack , Stackの違いは?

HStackは横方向、VStackは縦方向に並びます。また、Stackと違ってそれぞれ中央揃えになります。

まとめると下記のよな表になるでしょう

方向 align
Stack 左(start)
HStack 中央(center)
VStack 中央(center)

Stackをレイアウトに注意点

Stackの注意点として、「子要素はすべてReactElementになっている必要がある」というのものがあります。

例えば下記の様な場合、「🐶」のみしか表示されず、「This is Dog」は表示されません。

const Dog = () => {
  return <HStack>
    <Box>🐶</Box> This is Dog
  </HStack>
}

そのため、下記のように要素化する必要があります。

const Dog = () => {
  return <HStack>
    <Box>🐶</Box>
    <Box>This is Dog</Box>
  </HStack>
}

Boxにしたくない場合であれば、<>This is Dog</>などでも良いでしょう