flutter - 如何在 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 个按钮：Person 和 History 有类 Person 和 History：

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。 我哪里错了？

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

1. 每个屏幕/页面上只能有一个脚手架。（参考）
2. 因此将脚手架从每个按钮移动到 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 3

你不应该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)],
        ),
      ),
    );
  }
}

Answer 4

你不应该嵌套Scaffolds：

---

为什么要筑巢Scaffolds？

Scaffold 被设计为 MaterialApp 的单个顶级容器，通常不需要嵌套脚手架，这意味着每个页面应该有一个 Scaffold（更准确地说，对于每个路线/屏幕），

---

人物小工具

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 小部件示例中的冗余容器：

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