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

问题描述

我真的不明白什么是错误的以及如何解决

我想在屏幕上的行中显示2个按钮

我有无状态小部件MainPage：

<button class="btn-standard call-to-action">Search</button>

我有2个按钮：“人员”和“历史记录” 有班级人和历史：

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

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

解决方法

好的，我看到很多可能是原因。 首先，没有在每个无状态小部件中使用支架，每个屏幕只应有一个支架作为屏幕的根。

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

检查下面的笔，它不使用2个脚手架，不使用那么多容器，并查看行mainAxisAlignment属性https://codepen.io/ayRatul/pen/gOrXqMw

此外，尝试将container替换为SizedBox，如果仅使用height和width，则SizedBox效果很好；）

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

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

,

1. 每个屏幕/页面上只有一个脚手架。 （reference）
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,child: Column(
              mainAxisAlignment: MainAxisAlignment.center,children: [
                Text("History"),Icon(Icons.history)
              ],);
  }
}

,

您不应将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,child: Column(
          mainAxisAlignment: MainAxisAlignment.center,children: [Text("Person"),Icon(Icons.person)],);
  }
}

class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,children: [Text("History"),Icon(Icons.history)],);
  }
}

,

您不应嵌套Scaffolds：

---

为什么要嵌套Scaffolds？

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

---

PERSON WIDGET

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Container(
          width: 100,);
  }
}

---

历史小工具

class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
        child: RaisedButton(
          child: Container(
            width: 100,);
  }
}

主页面小插件

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,child: RaisedButton(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,);
  }
}