Блог

Я действительно не понимаю, что не так и как это исправить

Я хочу показать 2 кнопки на экране подряд

У меня есть главная страница виджета без состояния:

 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, переполненный бесконечными пикселями справа.
Где я не прав?

Хорошо, я вижу много вещей, которые могут быть причиной. Прежде всего, scaffold используется не во всех виджетах без состояния, у вас должен быть только один scaffold на экран в качестве корня вашего экрана.

Во-вторых, основная функция контейнера заключается в том, чтобы избегать шаблонных виджетов, если вы собираетесь использовать только дочернее свойство контейнера, я бы использовал SizedBox , однако в этом случае контейнер не нужен.

Проверьте следующее перо, оно не использует 2 каркаса, оно не использует так много контейнеров, и взгляните на mainAxisAlignment свойство строкиhttps://codepen.io/ayRatul/pen/gOrXqMw

Кроме того, попробуйте заменить container на SizedBox , SizedBox хорошо работает, если вы используете только высоту и ширину 😉

Редактировать: если по какой-то странной причине вы все еще хотите сохранить свой исходный код, я бы использовал

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

1. На каждом экране / странице должен быть только один каркас. (ссылка)
2. Таким образом, переместите каркас с каждой кнопки на главную страницу.

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

Вы не должны помещать 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)],
        ),
      ),
    );
  }
}
  

Вы не должны вставлять Scaffolds :

Почему вы должны вложить Scaffolds ?

Каркас был разработан как единый контейнер верхнего уровня для MaterialApp, и обычно нет необходимости вставлять каркасы, что означает, что для каждой страницы (точнее, для каждого маршрута / экрана) должен быть один каркас,

ВИДЖЕТ ПЕРСОНЫ

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