即使使用SingleChildScrollView

时间:2020-06-15 00:18:58

标签: flutter dart

我有一个包装在单个子视图中的容器,并且滚动条工作正常,除非文本很大,它显示阴影以及两个按钮都不会出现(抖动中众所周知的渲染溢出异常)是使用“单个子视图”后应该可以正常工作。我也尝试玩弄物理学,但没有任何效果。关键是滚动视图可以正常工作,并且容器大小根据其中的文本而变化是因为我正在使用媒体。查询,所以我不知道为什么当文本较大时会引发此异常。

The version with the problem

Without the problem

 body: SingleChildScrollView(
      dragStartBehavior: DragStartBehavior.down,
      scrollDirection: Axis.vertical,
      physics: ClampingScrollPhysics(),
      child: Container(
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [
              Theme.of(context).accentColor,
              Theme.of(context).primaryColor
            ])),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            SizedBox(
              height: 10,
            ),
            Container(
              height: 100,
              width: double.infinity,
              child: Card(
                semanticContainer: true,
                clipBehavior: Clip.antiAliasWithSaveLayer,
                color: Colors.pink[200],
                elevation: 30,
                margin: EdgeInsets.all(15),
                shape: RoundedRectangleBorder(
                    side: BorderSide(width: 3.0, color: Colors.indigo),
                    borderRadius: (BorderRadius.circular(30.0))),
                child: new Directionality(
                    textDirection: TextDirection.ltr,
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        "${playersList[_indexOfPlayer].name}'s Turn",
                        style: GoogleFonts.lato(
                          fontSize: 30,
                          fontWeight: FontWeight.w900,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    )),
              ),
            ),
 Container(
              //height: 400,
              width: double.infinity,
              child: Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4.identity()
                  ..setEntry(3, 2, 0.002)
                  ..rotateX(pi * _animation.value),
                child: Card(
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  color: Colors.pink[200],
                  elevation: 30,
                  margin: EdgeInsets.all(15),
                  shape: RoundedRectangleBorder(
                      side: BorderSide(width: 3.0, color: Colors.indigo),
                      borderRadius: (BorderRadius.circular(30.0))),
                  child: new Directionality(
                      textDirection: TextDirection.ltr,
                      child: Transform(
                        alignment: FractionalOffset.center,
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.001)
                          ..rotateX(pi * _animation.value),
                        child: Container(
                          padding: EdgeInsets.only(
                              top: 20.0, bottom: 50.0, left: 20, right: 20),
                          alignment: Alignment.topCenter,
                          child: Text(
                            textState
                                ? _gameState
                                    ? '${truth[_randomTruthIndex]}'
                                    : '${dare[_randomDaresIndex]}'
                                : 'Truth Or Dare?',
                            style: textState
                                ? _gameState
                                    ? GoogleFonts.lato(
                                        fontSize: 40,
                                        fontWeight: FontWeight.w900,
                                      )
                                    : GoogleFonts.lato(
                                        fontSize: 40,
                                        fontWeight: FontWeight.w900,
                                      )
                                : GoogleFonts.lato(
                                    wordSpacing: 10.0,
                                    color: Colors.red[900],
                                    fontWeight: FontWeight.w900,
                                    fontSize: 70),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      )),
                ),
              ),
            ),
  Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  //width: double.infinity,
                  alignment: Alignment.bottomLeft,
                  margin: EdgeInsets.all(15),
                  child: SizedBox(
                    height: 80,
                    width: 150,
                    child: RaisedButton(
                      onPressed: _buttonstate? null : () async {
                        if (textState == false) {
                          await _viewAnimation();
                          setState(() => textState = true);
                          _viewTruthQuestions();
                          _gameState = true;
                          _roundCheck();
                        } else {
                          await _viewAnimation();
                          setState(() => textState = false);
                          _scoreIncrease();
                          _viewPlayerName();
                          _roundCheck();
                        }
                      },
                      color: Colors.green,
                      textColor: Colors.white,
                      child: Text(
                        textState ? 'Done' : 'Truth',
                        style:
                            TextStyle(fontSize: 45, fontFamily: 'Signatra'),
                      ),
                    ),
                  ),
                ),
Container(
                  alignment: Alignment.bottomRight,
                  padding: EdgeInsets.only(right: 0.0, left: 50.0),
                  margin: EdgeInsets.all(15),
                  child: SizedBox(
                    height: 80,
                    width: 150,
                    child: RaisedButton(
                      onPressed: _buttonstate? null : () async {
                        if (textState == false) {
                          await _viewAnimation();
                          setState(() => textState = true);
                          _viewDares();
                          _gameState = false;
                          _roundCheck();
                        } else {
                          await _viewAnimation();
                          setState(() => textState = false);
                          _scoreDecrease();
                          _viewPlayerName();
                          _roundCheck();
                        }
                      },
                      color: Colors.pink,
                      textColor: Colors.white,
                      child: Text(
                        textState ? 'Forfeit' : 'Dare',
                        style:
                            TextStyle(fontSize: 40, fontFamily: 'Signatra'),
                      ),

2 个答案:

答案 0 :(得分:0)

使用扩展小部件包装容器,您会收到此警告。

示例:

Expanded(
          flex: 1,
          child: Container(
            color: Colors.amber,
          ),
        ),

有关更多信息:

https://api.flutter.dev/flutter/widgets/Expanded-class.html

答案 1 :(得分:0)

SingleChildScrollView与其子Container交换