zoukankan      html  css  js  c++  java
  • Flutter之解决页面底部黄色条纹的方法

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

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

    如将代码:

    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('assets/images/gameover.png', 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(
                   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', 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(
                       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('重新开始游戏')),
                    ),
                )
              ],
          )
        ]
      )
    )

    效果为:

  • 相关阅读:
    Spring-10-AOP先验知识之代理模式
    Spring-09-使用Java的方式配置Spring
    Spring-08-使用注解开发
    Spring-07-Bean自动配置
    Spring-06-依赖注入(DI)
    Spring-05-配置之别名、bean、import
    Spring-04-IOC创建对象的方式
    Spring-02-IOC理论推导
    Spring-01-初见spring
    h5
  • 原文地址:https://www.cnblogs.com/luoyihao/p/14718665.html
Copyright © 2011-2022 走看看