无法滚动我的屏幕。总是在 flutter 应用程序中给出溢出错误

Question

我无法滚动我的 flutter 应用主体。因为它一直在给出溢出错误。请查看下面的代码并帮助我。 Body.dart代码

import 'package:flutter/material.dart';

import 'CustomGridview.dart';

class MyCustomBody extends StatefulWidget {
  @override
  _MyCustomBodyState createState() => _MyCustomBodyState();
}

class _MyCustomBodyState extends State<MyCustomBody> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return SingleChildScrollView(
      child: Column(
        children: [
          Stack(
            overflow: Overflow.visible,
            children: [
              CustomPaint(
                painter: MyCustomPainter(),
                child: ClipPath(
                  clipper: MyCustomClip(),
                  child: Container(
                    decoration: new BoxDecoration(
                      gradient: new LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          color.custombarG1,
                          color.custombarG2,
                        ],
                      ),
                    ),
                    height: height / 2 - 50,
                    width: width,
                  ),
                ),
              ),
              Positioned(
                left: -40.0,
                top: 10.0,
                child: Image.asset(
                  'assets/images/covid3.png',
                  height: 310.0,
                ),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Padding(
                  padding: const EdgeInsets.only(top: 20.0, right: 2.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        'CoVID-19',
                        style: TextStyle(
                          color: color.writingTitle,
                          fontSize: 40.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(3.0),
                        child: Text(
                          'TRACKER',
                          style: TextStyle(
                            color: color.primary,
                            fontSize: 30.0,
                            fontStyle: FontStyle.italic,
                            fontWeight: FontWeight.bold,
                            height: 1.2,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(right: 40),
                        child: Text(
                          '+',
                          style: TextStyle(
                            color: color.writingHead,
                            fontSize: 35.0,
                            height: 0.75,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(right: 12.0),
                        child: Text(
                          'CASES',
                          style: TextStyle(
                            color: color.writingTitle,
                            fontSize: 30.0,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ),
                      Text(
                        'IN SECONDS',
                        style: TextStyle(
                          color: color.writingSubHead,
                          fontSize: 35.0,
                          fontWeight: FontWeight.bold,
                          fontFamily: 'Poppins',
                          height: 1.5,
                        ),
                      ),
                      Text(
                        'WorldWide',
                        style: TextStyle(
                          color: color.writingTitle,
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold,
                          fontFamily: 'Poppins',
                          height: 3.5,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 1.5,
            child: Card(
              color: color.cardTotalBg,
              child: Text(
                'hello There',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MyCustomClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();
    path.lineTo(0.0, size.height - 80);
    var firstCPoint = new Offset((size.width / 4) - 20, (size.height) / 2 - 50);
    var firstEPoint = new Offset((size.width / 2 + 30), size.height - 70);
    path.quadraticBezierTo(
        firstCPoint.dx, firstCPoint.dy, firstEPoint.dx, firstEPoint.dy);
    var secondCPoint = new Offset(size.width * 0.9, size.height + 60);
    var secondEPoint = new Offset(size.width, size.height / 2 + 50);
    path.quadraticBezierTo(
        secondCPoint.dx, secondCPoint.dy, secondEPoint.dx, secondEPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path = new Path();
    path.lineTo(0.0, size.height - 80);
    var firstCPoint = new Offset((size.width / 4) - 20, (size.height) / 2 - 50);
    var firstEPoint = new Offset((size.width / 2 + 30), size.height - 70);
    path.quadraticBezierTo(
        firstCPoint.dx, firstCPoint.dy, firstEPoint.dx, firstEPoint.dy);
    var secondCPoint = new Offset(size.width * 0.9, size.height + 60);
    var secondEPoint = new Offset(size.width, size.height / 2 + 50);
    path.quadraticBezierTo(
        secondCPoint.dx, secondCPoint.dy, secondEPoint.dx, secondEPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();
    canvas.drawShadow(path, color.custombarG2, 30.0, false);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

这是home.dart代码

import 'package:CovidTraces/body.dart';
import 'package:CovidTraces/constraints.dart';
import 'package:CovidTraces/customnavbar.dart';
import 'package:flutter/material.dart';
import 'customappbar.dart';

Constraints color = new Constraints();

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            CustomAppBar(),
            MyCustomBody(),
          ],
        ),
        bottomNavigationBar: MyCustomNavBar(),
      ),
    );
  }
}

请帮助我，我在 flutter 中遇到了很多这样的错误。在此，我也无法在使用单个子滚动视图后使我的 UI 可滚动。

Answer 1

错误原因：

列在主轴方向（垂直轴）扩展到最大尺寸，SingleChildScrollView 也是如此。

解决方案

所以，你需要限制SingleChildScrollView的高度。有很多种方法，您可以选择最适合您需要的方法。

使用 Expanded 小部件允许 SingleChildScrollView 占用剩余的 space。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            CustomAppBar(),
            Expanded(
              child: MyCustomBody(),
            ),
          ],
        ),
      ),
    );
  }
}

使用SizedBox

SingleChildScrollView

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            CustomAppBar(),
            SizedBox(
              height: 650,
              child: MyCustomBody(),
            ),
          ],
        ),
      ),
    );
  }
}

编辑：最好将 Appbar 添加到脚手架而不是 child。将 PreferredSize 小部件扩展到您的 CustomAppBar class 并将其放入脚手架中。

样本：

class CustomAppBar extends PreferredSize {
  final Widget child;
  final double height;

  CustomAppBar({@required this.child, this.height = kToolbarHeight});

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    return
       Container(
        height: preferredSize.height,
        alignment: Alignment.center,
        child: child,
      );
  }
}

无法滚动我的屏幕。总是在 flutter 应用程序中给出溢出错误

Not able to scroll my screen. Always giving overflow error in flutter app

user-interface

android

android-layout

flutter

flutter-test