トリッキーなスタックまたは列が中央に配置され、フラッターでレイアウト間にスペースが生じる

コンテンツが 2 つあり、高さのあるサイズのボックスであるとしましょう。これらを ContentA と ContentB と呼びます。列を使用して、間にスペースを入れて終端を揃えることができます。

Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 mainAxisAlignment: MainAxisAlignment.end,
 children: [
  ContentA(),
  SizedBox(height: 10),
  ContentB(),
 ],
)

しかし、一部の画面 (大きな画面) では、これらの値により ContentA が下に残りすぎます。次に、ContentA を中央に配置し、ContentB をスタックとともに下部に残しました。

Stack(
 children: [
  Column(
   mainAxisAlignment: MainAxisAlignment.center,
   children: [
    ContentA(),
   ],
  ),
  Positioned(
   left: 0, 
   bottom: 0, 
   right: 0, 
   child: ContentB(),
  ),
 ],
)

ただし、小さい画面では、この構成では ContentA と ContentB の間にスペースが残りません (ContentB は下限内にある必要があります)。

問題は、ContentA をできるだけ中央に配置し、ContentB との間に少なくともある程度のスペースを残す方法を教えてください。

次のように、スタックを使用せずに列内で拡張ウィジェットとフレキシブル ウィジェットを使用する必要があります。

Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Expanded(child: Container(color: Colors.red,)),
          Flexible(flex:0,child: SizedBox(height: 10)),
          Expanded(child: Container(color: Colors.blue,)),
        ],

    );

3

必要に応じて、最初のコンテナから展開されたコンテナを削除します。

2020 年 9 月 4 日 22:25

それは私には効果がありません、私は望んでいます両方のコンテンツの高さを維持し、ContentA を残りの上部の中央に配置するのではなく、列が使用しているすべてのスペースの中央に配置したいと考えています。

2020 年 9 月 4 日 22:36

スケッチを送っていただけますか?

2020 年 9 月 4 日 22:46