是否可以在具有3列子項的行下方添加另一行

我正在為應用程式制作 UI，它需要在螢屏的左側和右側有 4 個圖示向下，并且在所有圖示的高度中間有 1 個影像。使用一行一行小部件和 3 列它已設定，但我遇到的問題是在 3 列下方添加一個影像，這些影像將在螢屏上延伸。

有沒有辦法在 3 列下方添加另一行以顯示最后一張影像？

代碼目前看起來像這樣

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.orange,
      appBar: AppBar((...),
      ),
      body:
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //Left Column
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(...),
                IconButton(...),
                IconButton(...),
                IconButton(...),
              ],
            ),
            //Centre Column
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    child: SizedBox(
                      child: Image(...),
                ),
                    )
                )
              ],
            ),
            //Right Column
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(...),
                IconButton(...),
                IconButton(...),
                IconButton(...),
              ],
            ),
          ],
        )
    );
  }
}


  [1]: https://i.stack.imgur.com/w9NlN.png

uj5u.com熱心網友回復：

作為 Scaffold 主體的行的父高度等于整個螢屏。所以 Image 小部件也試圖從父級獲得最大可能的高度。要洗掉它，請從下面的代碼中參考:: add Column 作為頂級 Row 的父級

  final url = "https://images.ctfassets.net/23aumh6u8s0i/4TsG2mTRrLFhlQ9G1m19sC/4c9f98d56165a0bdd71cbe7b9c2e2484/flutter";
  @override
Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData.dark().copyWith(
    scaffoldBackgroundColor: darkBlue,
  ),
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body:
    Column(
      children: [
        SizedBox(
          height: 350,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              //Left Column
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                ],
              ),
              //Centre Column
              Image.network(url),
              //Right Column
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
}

標籤：扑 颤振布局

上一篇：在拖動其父項之后/同時阻止TextField重置

下一篇：錯誤：預期1個位置引數，但找到0個