переливающийся флаттер RenderFlex - PullRequest
Новая
       15

переливающийся флаттер RenderFlex

0 голосов
/ 28 января 2019

Я пытаюсь создать, казалось бы, простую страницу с флаттером.

Она содержит всего пять строк, где строки 1 и 2, 3 и 4 принадлежат друг другу, а последняя строка - отдельная.

Строка 1: центрированный текст Строка 2: 8 значков *

Строка 3: центрированный текст Строка 4: 5 флажков

Строка 5: текст с помощью следующей пиктограммы

Проблема, которую я получаю, заключается в размере: I / флаттер (22610): ◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢Ren RenderFlex переполнен на 248 пикселей справа.

Я пытался сделать код в разных классах, в соответствии с их принадлежностью, но потом я получаюэта ошибка.Когда я попытался поместить код в контейнеры, iconButtons и checkBoxes перестали работать.Я прочитал много вопросов о подобных проблемах здесь, в Stackoverflow, и погуглил об этом, но я все еще застрял. 

class MyIcon extends StatefulWidget {
  @override
  _MyIconState createState() => _MyIconState();
}

class _MyIconState extends State<MyIcon> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      //   body: Container(
      //     height: 180.0,
      //   color: Colors.lightBlueAccent,

  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 50.0),
          ),
          Text(
            'FIRST TEXT',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.white,
            ),
          ),
        ],
      ),
      Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,

        children: <Widget>[

     //         Padding(padding: EdgeInsets.only(left: 3.0, right: 10.0)),
              _IconButtons(
                headImageAssetPath: 'assets/ico.png',
                onPressed: () {},
              ),
              _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
          _IconButtons(
            headImageAssetPath: 'assets/ico.png',
            onPressed: () {},
          ),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "SECOND TEXT'",
            style: TextStyle(fontSize: 25.0, color: Colors.white),
          ),
        ],
      ),
      MyCheckBox(),
    ],
  ),
  //     ),
);
  }
}

class _IconButtons extends StatelessWidget {
  final iconSize = 60.0;
  final String headImageAssetPath;
  final onPressed;

  _IconButtons({this.headImageAssetPath, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return IconButton(
        iconSize: iconSize,
        icon: Image.asset(headImageAssetPath),
        onPressed: () {});
  }
}

class MyCheckBox extends StatefulWidget {
  @override
  _MyCheckBoxState createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBox> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: <Widget>[
          Expanded(
            child: Row(
              children: <Widget>[
                Text(
                  "ANOTHER TEXT",
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                    fontSize: 25.0,
                    color: Colors.blueGrey,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Это одна из многих попыток.Если вы хотите, я могу отправить код для флажков тоже.(Я новичок в трепетании, поэтому извините, если мой код плох).

Любая помощь приветствуется.Спасибо.

1 Ответ

0 голосов
/ 30 января 2019

В row 2 каждая ширина иконки кнопки имеет значение 60, тогда контейнер Row будет иметь значение ширины не менее 60 * 8 = 480, поэтому возникает ошибка.

У меня есть два решения для вас:

  1. Если вы хотите сохранить ширину размера кнопки 60, вы можете заменить Row на Wrap, кнопка начнет новую строку, когда она достигнет края

  2. Если вы хотите, чтобы 8 кнопок были помещены в one single row, вы можете обернуть IconButton с помощью Expanded

    return Expanded(child:IconButton(
      iconSize: iconSize,
      icon: Image.asset(headImageAssetPath),
      onPressed: () {}
    ));
...