RenderFlex溢出-高度给定但未限制SizedBox的高度。

3

Card小部件问题:

SizedBox(
                height: screenHeight * 0.79,    // Previously 0.71
                width: screenWidth * 0.85,
                child: Card(
...

enter image description here

我不明白这个问题,我已经设置了高度,但是它显示高度没有限制。因此,我得到了RenderFlex溢出错误。您可以查看相关的小部件,可能是什么问题呢?

示例小部件:

import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class SizeTest extends StatefulWidget {
  const SizeTest({Key? key}) : super(key: key);

  @override
  State<SizeTest> createState() => _SizeTestState();
}

class _SizeTestState extends State<SizeTest> {
  @override
  Widget build(BuildContext context) {
    EdgeInsets padding = MediaQuery.of(context).padding;
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height - padding.top - padding.bottom - kBottomNavigationBarHeight;

    final pageView = PageView(
      onPageChanged: (page) {
      },
      children: [
        // Games
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: Scrollbar(
                child: SingleChildScrollView(
                  child: SizedBox(
                    height: screenHeight * 1.075,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          'ok'
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );

    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(height: screenHeight * 0.02),
              Center(
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    'h',
                    textAlign: TextAlign.center,
                    style: GoogleFonts.alumniSans(
                        fontSize: 40,
                        color: Colors.white
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 0,),

              // Copyright
              Container(
                height: screenHeight * 0.02,
                margin: EdgeInsets.only(bottom: screenHeight * 0.01),
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    'h',
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.8),
                      fontSize: 10,
                    ),
                  ),
                ),
              ),
              SizedBox(height: screenHeight * 0.01,),

              SizedBox(
                height: screenHeight * 0.03,
                width: screenWidth * 0.8,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () {

                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'h',
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'h',
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {

                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'h',
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'd',
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: screenHeight * 0.01,),

              SizedBox(
                height: screenHeight * 0.8,    // Previously 0.71
                width: screenWidth * 0.85,
                child: Card(
                  color: Colors.white,
                  child: (true) ?
                  pageView :
                  Center(
                    child: SizedBox(
                      height: screenHeight * 0.05,
                      width: screenWidth * 0.1,
                      child: const CircularProgressIndicator(
                        color: Color(0xFFF04F23),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: MediaQuery.of(context).orientation == Orientation.portrait ?
        AnimatedBottomNavigationBar(
          backgroundColor: Colors.cyan,
          onTap: (index) {
          },
          activeIndex: 0,
          icons: const [
            Icons.f,
            Icons.f,
            Icons.f,
            Icons.f,
          ],
          gapLocation: GapLocation.center,
          notchSmoothness: NotchSmoothness.sharpEdge,
          leftCornerRadius: 32,
          rightCornerRadius: 32,
        ) :
        null,
      ),
    );
  }
}

你能否包含一个完整小部件的示例? - Yeasin Sheikh
@YeasinSheikh 我已经包含它了。 - Jiehfeng
1个回答

1
最终找出了罪魁祸首,就是这个小部件:
Center(
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    'h',
                    textAlign: TextAlign.center,
                    style: GoogleFonts.alumniSans(
                        fontSize: 40,
                        color: Colors.white
                    ),
                  ),
                ),
              ),

尽管 Center 小部件有一个 FittedBox,但它当然没有大小。我只是在其中添加了一个 SizedBox,现在应用程序在较小的设备上也能自适应。如果 Flutter 能告诉我具体是哪个设备就好了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接