底部溢出 99761 像素的 RenderFlex

Question

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

我收到此错误：

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

考虑应用弹性因子（例如，使用 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),
);

} }

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