如何在颤动中增加 SingleChildScrollView 的大小？答案

【问题标题】：How to increase the size of SingleChildScrollView in flutter?如何在颤动中增加 SingleChildScrollView 的大小？
【发布时间】：2020-12-31 05:00:25
【问题描述】：

我正在制作一个应用程序，其中一个页面是可滚动的。我使用 SingleChildScrollView 滚动页面。我需要向它添加更多东西，当我这样做时，由于高度有限，它会出错。

谁能帮我扩大 SingleChildScrollView 的大小，以便我可以完成我的应用程序？

这是整个代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xdflutter/Component61.dart';
import './Component31.dart';
import './Component22.dart';
import './Component21.dart';
import './start.dart';
import 'package:adobe_xd/page_link.dart';
import 'package:flutter_svg/flutter_svg.dart';

class tester extends StatelessWidget {
  tester({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
      // ignore: unnecessary_statements
      (context, constraint) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
                minHeight: constraint.maxHeight),
            child: IntrinsicHeight(
              child: Column(
                children: <Widget>[
                  Transform.translate(
                    offset: Offset(0.0, 290.0),
                    child:
                    // Adobe XD layer: 'right' (shape)
                    Container(
                      width: 315.0,
                      height: 287.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/right.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -275.0),
                    child: SizedBox(
                      width: 434.0,
                      child: Text(
                        'What you should know \nbefore you begin? ',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 36,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -260.0),
                    child: SizedBox(
                      width: 348.0,
                      height: 108.0,
                      child: Component31(),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(-0.5, -376.5),
                    child: SvgPicture.string(
                      _svg_kr65u6,
                      allowDrawingOutsideViewBox: true,
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -370.0),
                    child: SizedBox(
                      width: 166.0,
                      child: Text(
                        'R:Right',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 15.0),
                    child:
                    // Adobe XD layer: 'left' (shape)
                    Container(
                      width: 307.0,
                      height: 278.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/left.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -320.0),
                    child: SizedBox(
                      width: 130.0,
                      child: Text(
                        'L:Left',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 50.0),
                    child:
                    // Adobe XD layer: 'face' (shape)
                    Container(
                      width: 312.0,
                      height: 289.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(54.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/face.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -300.0),
                    child: SizedBox(
                      width: 142.0,
                      child: Text(
                        'F:Face',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 90.0),
                    child: Container(
                      width: 314.0,
                      height: 298.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/back.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -270.0),
                    child: SizedBox(
                      width: 173.0,
                      child: Text(
                        'B: Back ',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 130.0),
                    child: Container(
                      width: 314.0,
                      height: 300.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/upper.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -230.0),
                    child: SizedBox(
                      width: 192.0,
                      child: Text(
                        'U: Upper',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 165.0),
                    child: Container(
                      width: 310.0,
                      height: 296.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/down.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -190.0),
                    child: SizedBox(
                      width: 187.0,
                      child: Text(
                        'D: Down',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 145.0),
                    child: SizedBox(
                      width: 329.0,
                      child: Text(
                        'R2: Right twice',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 160.0),
                    child: Container(
                      width: 312.0,
                      height: 294.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/r2.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.5, 170.0),
                    child: SizedBox(
                      width: 442.0,
                      height: 0.0,
                      child: Component22(),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 185.0),
                    child: SizedBox(
                      width: 408.0,
                      child: Text(
                        'Counter-clockwise \nrotations',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.5, 380.0),
                    child: SizedBox(
                      width: 442.0,
                      height: 0.0,
                      child: Component22(),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 200.0),
                    child: SizedBox(
                      width: 500.0,
                      height: 200.0,
                      child: Component61(),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.5, 260.0),
                    child: SizedBox(
                      width: 442.0,
                      height: 0.0,
                      child: Component22(),
//        THIS IS IF I NEED TO ADD LINE BELOW SLICE TURNS
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 190.0),
                    child: SizedBox(
                      width: 238.0,
                      child: Text(
                        'Slice turns ',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, 280.0),
                    child: Container(
                      width: 312.0,
                      height: 303.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/m_anti.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(0.0, -80.0),
                    child: SizedBox(
                      width: 226.0,
                      child: Text(
                        'M: Middle ',
                        style: TextStyle(
                          fontFamily: 'Corbel',
                          fontSize: 42,
                          color: const Color(0xff000000),
                          fontWeight: FontWeight.w700,
                          decoration: TextDecoration.underline,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
//              Expanded(
//              child: (SingleChildScrollView(
//                child: Column(
//                  children: <Widget>[
                    Transform.translate(
                      offset: Offset(0.0, 100.0),
                      child: Container(
                        width: 304.0,
                        height: 297.0,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50.0),
                          image: DecorationImage(
                            image: const AssetImage('assets/images/m.png'),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                    ),
          Transform.translate(
            offset: Offset(0.0, 250.0),
            child: Container(
              width: 304.0,
              height: 297.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50.0),
                image: DecorationImage(
                  image: const AssetImage('assets/images/m.png'),
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
          Transform.translate(
            offset: Offset(18.8, 3751.0),
            child: SizedBox(
              width: 338.0,
              child: Text(
                'M\': Middle anti-\nclockwise ',
                style: TextStyle(
                  fontFamily: 'Corbel',
                  fontSize: 42,
                  color: const Color(0xff000000),
                  fontWeight: FontWeight.w700,
                  decoration: TextDecoration.underline,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Transform.translate(
            offset: Offset(-33.5, 4618.5),
            child: SizedBox(
              width: 442.0,
              height: 0.0,
              child: Component22(),
            ),
          ),
          Transform.translate(
            offset: Offset(35.5, 100.5),
            child: SizedBox(
              width: 305.0,
              height: 0.0,
              child: Component22(),
            ),
          ),
          Transform.translate(
            offset: Offset(35.5, 100.5),
            child: SizedBox(
              width: 305.0,
              height: 0.0,
              child: Component22(),
            ),
          ),
          Transform.translate(
            offset: Offset(51.0, 100.0),
            child: SizedBox(
              width: 273.0,
              height: 56.0,
              child: Component21(),
            ),
          ),
          Transform.translate(
            offset: Offset(91.0, 100.0),
            child: PageLink(
              links: [
                PageLinkInfo(
                  transition: LinkTransition.Fade,
                  ease: Curves.easeOut,
                  duration: 0.3,
                  pageBuilder: () => start(),
                ),
              ],
              child: SizedBox(
                width: 193.0,
                height: 43.0,
                child: Text(
                  'Begin learning! ',
                  style: TextStyle(
                    fontFamily: 'Corbel',
                    fontSize: 28,
                    color: const Color(0xffffffff),
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.right,
                ),
              ),
            ),
          ),
                ],
              ),
            ),
          ),
        );
      };
  }
}

const String _svg_kr65u6 =
    '<svg viewBox="-33.5 113.5 442.0 121.0" ><path transform="translate(-33.5, 113.5)" d="M 442 0 L 0 0" fill="none" stroke="#707070" stroke-width="3" stroke-miterlimit="4" stroke-linecap="butt" /><path transform="translate(-33.5, 234.5)" d="M 442 0 L 0 0" fill="none" stroke="#707070" stroke-width="3" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';

提前致谢！

【问题讨论】：

限制高度？可以与我们分享您迄今为止尝试过的代码。以及错误详情
只需将您的 Body 小部件包装到 SinglechildScrollView 并在列小部件中添加任何新值。无需为 SingleChildScrollView 指定高度
@Mrvd 你这是什么意思？
SingleChildScrollView(Column:[Container(height:100)]) 使用多个容器添加多个项目
@Mrvd，我刚刚添加了颤振代码，你能看看并解释一下吗？

标签： flutter dart scroll expand singlechildscrollview

【解决方案1】：

你可以使用下面的代码。

Container(
  height: MediaQuery.of(context).size.height * .5,
  child: SingleChildScrollView(
    //Your Codes go here
  ),
)

这里MediaQuery.of(context).size.height 是屏幕的总高度，MediaQuery.of(context).size.height * .5 表示屏幕的一半。所以滚动将发生在屏幕的一半之间。

【讨论】：

我试过这个。但这给了我一个错误。我没有写 0.5，而是写了 2 以使屏幕尺寸加倍。但是当我运行代码时，我得到了这个错误： RenderBox was not layoutL RenderRepaintBoundary#58a5a relayoutBoundary=up2 NEEDS-PAINT Failed Assertion: line 1694 pos 12: 'hasSize' @evan
滚动不能超过屏幕尺寸
你最多可以使用 *1

【解决方案2】：

我没有完全理解，但是您可以在 singleChildScrollView 中使用列而不受高度限制。像这个示例一样，您可以添加小部件：

SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Text('hello'),
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Column(
                children: <Widget>[
                  Text('hello'),
                  Text('hello'),
                ],
              )
            ],
          ),
        ),

【讨论】：

感谢 Ali Mohammadzadeh 和 Evan 的投入。我一定会添加它们并尝试

【解决方案3】：

根据这个进行修改

 class tester extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

      return SafeArea(
        child: Scaffold(
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(height: 100,
                color: Colors.green,),
                SizedBox(height: 20,),
                Container(height: 100, color: Colors.yellow,),
                SizedBox(height: 20,),
                Container(height: 100, color: Colors.orange,),

                SizedBox(height: 20,),
                Container(height: 100, color: Colors.pink,),

                SizedBox(height: 20,),
                Container(height: 100, color: Colors.black,),

                SizedBox(height: 20,),
                Container(height: 100, color: Colors.red,),

                SizedBox(height: 20,),
                Container(height: 100, color: Colors.yellow,),

              ],
            ),
          ),
        ),
      );

  }
}

【讨论】：