Flutter之解决页面底部黄色条纹的方法

最新推荐文章于 2024-11-05 19:57:13 发布

「已注销」

最新推荐文章于 2024-11-05 19:57:13 发布

阅读量47

点赞数

本文链接：https://blog.csdn.net/m0_61726796/article/details/133001161

版权

flutter javascript 前端开发语言 ecmascript

用Flutter写页面时，有时页面内容太多，底部会出现黄色条纹。

解决方法：在组件外增加一层ListView即可。

如将代码：

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.asset('assets/images/gameover.png',width: 100,height: 100,),
        Container(
          child:Text('游戏结束',style: TextStyle(
            fontSize: 40,
            color: Colors.green
            ),
          ),
          margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
        ),
        Container(
          child:Text('您的分数为：${_score}',style: TextStyle(
            fontSize: 40,
            color: Colors.green
            ),
          ),
          margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 50.0),
        ),
        Container(
          child:Text('开始时间为：${_time}',style: TextStyle(
            fontSize: 40,
            color: Colors.green
            ),
          ),
          margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 50.0),
        ),
        Container(
          child:Text('结束时间为：${_endTime}',style: TextStyle(
            fontSize: 40,
            color: Colors.green
            ),
          ),
          margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 50.0),
        ),
        RaisedButton(
          onPressed: (){
            Navigator.pop(context,true);
          },
          textColor: Colors.white,
          clipBehavior: Clip.hardEdge,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(22.0))),
            padding: const EdgeInsets.all(0.0),
            child: Container(
              width: 260,
              height: 44,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[
                    Color(0xff25D1D1),
                    Color(0xff3BE6AD),
                    Color(0xff20DDAA)
                  ],
                ),
              ),
              padding: const EdgeInsets.all(10.0),
              child: Container(
                alignment: Alignment.center,
                child: Text('重新开始游戏')),
            ),
        )
      ],
  )
)

改成

body: Center(
  child: ListView(
    children:[
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('assets/images/gameover.png',width: 100,height: 100,),
            Container(
              child:Text('游戏结束',style: TextStyle(
                fontSize: 40,
                color: Colors.green
                ),
              ),
              margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
            ),
            Container(
              child:Text('您的分数为：${_score}',style: TextStyle(
                fontSize: 40,
                color: Colors.green
                ),
              ),
              margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 50.0),
            ),
            Container(
              child:Text('开始时间为：${_time}',style: TextStyle(
                fontSize: 40,
                color: Colors.green
                ),
              ),
              margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 50.0),
            ),
            Container(
              child:Text('结束时间为：${_endTime}',style: TextStyle(
                fontSize: 40,
                color: Colors.green
                ),
              ),
              margin: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 50.0),
            ),
            RaisedButton(
              onPressed: (){
                Navigator.pop(context,true);
              },
              textColor: Colors.white,
              clipBehavior: Clip.hardEdge,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(22.0))),
                padding: const EdgeInsets.all(0.0),
                child: Container(
                  width: 260,
                  height: 44,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: <Color>[
                        Color(0xff25D1D1),
                        Color(0xff3BE6AD),
                        Color(0xff20DDAA)
                      ],
                    ),
                  ),
                  padding: const EdgeInsets.all(10.0),
                  child: Container(
                    alignment: Alignment.center,
                    child: Text('重新开始游戏')),
                ),
            )
          ],
      )
    ]
  )
)

效果为：