底部溢出 99761 像素的 RenderFlex答案

【问题标题】：A RenderFlex overflowed by 99761 pixels on the bottom底部溢出 99761 像素的 RenderFlex
【发布时间】：2020-11-22 05:47:05
【问题描述】：

这是我的代码，我将“Keyname”传递给无状态小部件，该小部件使用灵活小部件包装在不同的 dart 文件中。

我收到此错误：

溢出的 RenderFlex 的方向为 Axis.vertical。溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 而言太大。

考虑应用 flex 因子（例如，使用 Expanded 小部件）来强制 RenderFlex 的子级适应可用空间，而不是调整到其自然大小。这被认为是一种错误情况，因为它表明存在看不到的内容。如果内容合法地大于可用空间，请考虑在将其放入 flex 之前使用 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),
);

} }

【问题讨论】：

标签： android-studio flutter dart flutter-layout

【解决方案1】：

这些是您需要对代码进行的更改，

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，在你的情况下，它可以是任何受约束的小部件。

【讨论】：