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

Question

我正在为一个应用程序制作一个 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

Answer 1

作为脚手架主体的行的父级高度等于整个屏幕。所以图像小部件也试图从父级获得最大可能的高度。要删除它，请参考以下代码：将列添加为顶级行的父级

  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)),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
}

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

Is it possible to add another row underneath a row with 3 column children

flutter

flutter-layout