0

我正在制作一个应用程序，其中一个页面是可滚动的。我使用 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>';

提前致谢！

4

3 回答 3

0

您可以使用以下代码。

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表示屏幕的一半。所以滚动将发生在屏幕的一半之间。

于 2020-09-13T07:09:43.807 回答
0

我不完全理解，但您可以在 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'),
                ],
              )
            ],
          ),
        ),

`

于 2020-09-13T07:13:34.727 回答
0

根据此进行更改

 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,),

              ],
            ),
          ),
        ),
      );

  }
}
于 2020-09-14T15:23:36.530 回答