Question

这是我的代码，我将“关键字名”传递给无状态窗口小部件，此窗口小部件与Flexible窗口小部件一起包装在另一个dart文件中。

我收到此错误：

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

请考虑应用弹性系数（例如，使用扩展窗口小部件）来强制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),
  );
 }
}

在这里，我有脚手架，就您而言，它可以是任何受约束的小部件。

RenderFlex在底部溢出了99761像素

1 个答案: