如何在 Flutter 中连续创建 2 个按钮？

Question

我真的不明白哪里出了问题以及如何解决

我想在屏幕上连续显示 2 个按钮

我有无状态小部件 MainPage：

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Person(),
          History()
        ],
      ),
    );
  }
}

我有 2 个按钮：人物和历史有类个人和历史：

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          child: RaisedButton(
            child: Container(
              width: 100,
              height: 100,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Person"),
                  Icon(Icons.person)
                ],
              ),
            ),
          ),
        ),
    );
  }
}
class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("History"),
                Icon(Icons.history)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

但我得到一个错误：RenderFlex 溢出右侧的 Infinity 像素。 我哪里错了？

Answer 1

好的，我看到了很多可能是原因的事情。首先，并不是每个无状态小部件都使用脚手架，每个屏幕应该只有一个脚手架作为屏幕的根。

其次，容器的主要功能是避免样板小部件，如果你只打算使用容器子属性，我会使用 SizedBox，但是在这种情况下，容器是不必要的。

看看下面这支笔，它没有用2个脚手架，也没有用那么多容器，看看那一行mainAxisAlignment 属性 https://codepen.io/ayRatul/pen/gOrXqMw

此外，尝试将 container 替换为 SizedBox ，如果只使用高度和宽度，SizedBox 效果很好 ;)

编辑：如果出于某些奇怪的原因，您仍想保留原始代码，我会使用

Row(
     mainAxisSize:MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Person(),
          History()
        ],

Answer 2

你不应该嵌套 Scaffolds:

为什么要嵌套 Scaffolds？

The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds which means there should be one Scaffold for each page (more precisely, for each Route/screen),

个人小部件

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Container(
          width: 100,
          height: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [Text("Person"), Icon(Icons.person)],
          ),
        ),
      ),
    );
  }
}

历史小工具

class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [Text("History"), Icon(Icons.history)],
            ),
        ),
      ),
    );
  }
}

主页小部件

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [Person(), History()],
        ),
      ),
    );
  }
}

结果：

注意：可以从上面做一些改进： // 1. 你应该删除 RaisedButton Widget 中的冗余容器示例：

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 100,
      child: RaisedButton(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("Person"), Icon(Icons.person)],
        ),
      ),
    );
  }
}

Answer 3

每个 screen/page 上只能有一个脚手架。 (reference)
因此将 Scaffold 从每个按钮移动到 MainPage。

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Person(),
            History()
          ],
        ),
      ),
    );
  }
}

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Container(
          width: 100,
          height: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Person"),
              Icon(Icons.person)
            ],
          ),
        ),
      ),
    );
  }
}
class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("History"),
                Icon(Icons.history)
              ],
            ),
          ),
        ),
      );
  }
}

Answer 4

你不应该到处放 Scaffold。在这里阅读更多：https://api.flutter.dev/flutter/material/Scaffold-class.html

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,
      child: Container(
        width: 100,
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("Person"), Icon(Icons.person)],
        ),
      ),
    );
  }
}

class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,
      child: Container(
        width: 100,
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("History"), Icon(Icons.history)],
        ),
      ),
    );
  }
}

如何在 Flutter 中连续创建 2 个按钮？

How to create 2 buttons in a row in Flutter?

dart

flutter

flutter-scaffold