为什么 IconButtons 之间的空间没有填满？

Question

我现在正在用 Flutter 编写一个应用程序，我想制作一个自定义 AppBar。我选择了两个图标按钮，将它们排成一排，并尝试填充它们之间的空间。不知何故，什么也没发生，他们呆在同一个地方。我希望一个 IconButton 在左边，另一个在右边。

这是我的代码：

    class TopNavigator extends StatelessWidget {
      const TopNavigator({Key key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              padding: EdgeInsets.only(top: 15.0),
              icon: Icon(
                Icons.add_rounded,
              ),
              iconSize: 40.0,
              color: Colors.white,
              onPressed: () {},
            ),
            IconButton(
              padding: EdgeInsets.only(top: 15.0),
              icon: Icon(
                Icons.all_inbox_rounded,
              ),
              color: Colors.white,
              iconSize: 40.0,
              onPressed: () {},
            ),
          ],
        );
      }
    }

这是一张图片，显示了它现在的样子：

当我通过 basudev nayak 运行此代码时，它给了我错误：

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            backgroundColor: Colors.black,
            body: Row(
              children: [
                Column(
                  children: [
                    TopNavigator(),
                  ],
                )
              ],
            ),
          ),
        );
      }
    }
    
    class TopNavigator extends StatelessWidget {
      const TopNavigator({Key key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
              padding: EdgeInsets.only(top: 15.0),
              icon: Icon(
                Icons.add_rounded,
              ),
              iconSize: 40.0,
              color: Colors.white,
              onPressed: () {},
            ),
            Spacer(),
            IconButton(
              padding: EdgeInsets.only(top: 15.0),
              icon: Icon(
                Icons.all_inbox_rounded,
              ),
              iconSize: 40.0,
              color: Colors.white,
              onPressed: () {},
            ),
          ],
        );
      }
    }
    

Errors: 
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#e3531 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Scaffold file:///C:/Users/Eugen/Desktop/FlutterProjects/eduhub/lib/main.dart:9:13
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
Null check operator used on a null value
The relevant error-causing widget was: 
  Row file:///C:/Users/User/Desktop/FlutterProjects/eduhub/lib/main.dart:11:15
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用Expanded
代码sn-p

body: Row(
      children: [
            Expanded(
              child: Column(
                children: [
                  TopNavigator(),

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  TopNavigator(),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {
  const TopNavigator({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          padding: EdgeInsets.only(top: 15.0),
          icon: Icon(
            Icons.add_rounded,
          ),
          iconSize: 40.0,
          color: Colors.white,
          onPressed: () {},
        ),
        Spacer(),
        IconButton(
          padding: EdgeInsets.only(top: 15.0),
          icon: Icon(
            Icons.all_inbox_rounded,
          ),
          iconSize: 40.0,
          color: Colors.white,
          onPressed: () {},
        ),
      ],
    );
  }
}

Answer 2

在两个图标按钮之间使用 Spacer() 小部件

Answer 3

对于 Row 或 Column 小部件中的元素对齐，请使用 MainAxisAlignment 和 CrossAxisAlignment。更多信息，您可以阅读docs。

对于您的情况，您希望 2 个图标在 Row 的主轴上彼此分开，因此您需要指定 MainAxisAlignment 属性，该属性应为：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween
)

对于该错误，您可以将您的 Row 包装在一个 Container 中并为其设置宽度。 Here 代码 sn-p。

另外，对于这部分

body: Row(
  children: [
    Column(
      children: [
        TopNavigator(),
      ],
    )
  ],
)

我认为您在这里不需要行和列。设置好了

body: TopNavigator()

它仍然可以正常工作

Answer 4

const TopNavigator({Key key}) : super(key: key);@override Widget build(BuildContext context) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    IconButton(
      padding: EdgeInsets.only(top: 15.0),
      icon: Icon(
        Icons.add_rounded,
      ),
      iconSize: 40.0,
      color: Colors.white,
      onPressed: () {},
    ),Spacer(),
    IconButton(
      padding: EdgeInsets.only(top: 15.0),
      icon: Icon(
        Icons.all_inbox_rounded,
      ),
      color: Colors.white,
      iconSize: 40.0,
      onPressed: () {},
    ),
  ],
);}}

这应该可以完成工作。