底部溢出 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，在您的情況下，它可以是任何受約束的小部件。