RenderFlex переполнен 99761 пикселем внизу - PullRequest
Новая
       27

RenderFlex переполнен 99761 пикселем внизу

0 голосов
/ 01 августа 2020

Это мой код, я передаю "Keyname" виджету без сохранения состояния, этот виджет обернут гибким виджетом в другом файле dart.

Я получаю эту ошибку:

Переполненный RenderFlex имеет ориентацию Axis.vertical. Край RenderFlex, который выходит за пределы, был отмечен на рендеринге желто-черным полосатым узором. Обычно это вызвано тем, что содержимое слишком велико для RenderFlex.

Рассмотрите возможность применения коэффициента гибкости (например, с помощью расширенного виджета), чтобы заставить дочерние элементы RenderFlex уместиться в доступном пространстве вместо того, чтобы их размер соответствовал их натуральный размер. Это считается ошибкой, поскольку указывает на то, что есть контент, который нельзя увидеть. Если содержимое действительно больше, чем доступное пространство, подумайте о том, чтобы обрезать его с помощью виджета ClipRect, прежде чем помещать его во гибкий, или используйте прокручиваемый контейнер, а не Flex, например ListView.

Вот код: 

Flexible(
          flex: 2,
            child: Container(
              padding: EdgeInsets.all(10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      KeyBoardButtonFirstRow(
                        width: deviceWidth / 6,
                        color: Color(0xfffdc40d),
                        keyName: '2nF',
                      ),
                      KeyBoardButtonFirstRow(
                        width: deviceWidth / 6,
                        color: Color(0xff52e2fe),
                      ),
                      KeyBoardButtonFirstRow(
                        width: deviceWidth / 2,
                        color: Color(0xffabbfc5),
                      ),
                    ],
                  ),


class KeyBoardButtonFirstRow extends StatelessWidget {
final String keyName;
final double width;
final Color color;

KeyBoardButtonFirstRow({this.keyName, this.width, this.color});

@override
Widget build(BuildContext context) {
  return Container(
    height: 30.0,
    width: width,
    decoration: BoxDecoration(
    color: color,
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [BoxShadow(
      color: Colors.white.withOpacity(0.5),
      blurRadius: 2.0,
    )],
  ),
  child: Text(keyName),
);

}}

1 Ответ

0 голосов
/ 01 августа 2020

Это изменения, которые вам нужно внести в свой код, 

class Test0 extends StatefulWidget {
 @override
 _Test0State createState() => _Test0State();
 }

class _Test0State extends State<Test0> {
  @override
 Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Flexible(
          flex: 2,
          child: Container(
              height: MediaQuery.of(context).size.width,
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.all(10.0),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [

                          KeyBoardButtonFirstRow(
                            width: MediaQuery.of(context).size.width / 6,
                            color: Color(0xfffdc40d),
                            keyName: '2nF',
                          ),
                        ],
                   )
              ])
          ))
      ],
    ),
  );
 }
 }
 
 class KeyBoardButtonFirstRow extends StatelessWidget {
   final String keyName;
   final double width;
   final Color color;

   KeyBoardButtonFirstRow({this.keyName, this.width, this.color});

 @override
 Widget build(BuildContext context) {
  return Container(
  height: 30.0,
  width: width,
  decoration: BoxDecoration(
    color: color,
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: Colors.white.withOpacity(0.5),
        blurRadius: 2.0,
      )
    ],
  ),
  child: Text(keyName),
  );
 }
}

Здесь у меня Scaffold, в вашем случае это может быть любой ограниченный виджет .

...