• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > 混合APP开发 >  flutter布局提示◢◤◢正文

flutter布局提示◢◤◢◤◢◤◢◤

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-11-08 11:21
分享到:
今天在用flutter布局时,打包提示◢◤◢◤◢◤◢◤,如下:
Reloaded 1 of 456 libraries in 282ms.
I/flutter ( 2286): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 2286): ════════════════════════════════════════════════════════════════════════════════════════════════════

图片底部出现“BOTTOM OVERFLOWED BY 0.264 PIXELS”边框:



代码如下:
class HomeContent extends StatelessWidget{
  List<Widget> _getListData(){
    var list = listData.map((item){
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(
              item['imageUrl'],
              fit: BoxFit.cover,
            ),
            Text(
              item['title'],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 18
              ),
            ),
            Text(
              item['author'],
              style: TextStyle(
                fontSize: 14,
                color: Color.fromARGB(100, 0, 0, 0)
              ),
            )
          ],
        ),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing:10,
      mainAxisSpacing: 10,
      crossAxisCount: 3,
      padding: EdgeInsets.all(10),
      children: this._getListData(),
    );
  }
}
网上查,说是图片超出容器,要给图片设置高度,这里,除了给图片高度,还可以改变网格的宽高比例,让高度比例更大点,修改后
 class HomeContent extends StatelessWidget{
  List<Widget> _getListData(){
    var list = listData.map((item){
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(
              item['imageUrl'],
              fit: BoxFit.cover,
              //这里给高度也能解决
              height: 100,
            ),
            Text(
              item['title'],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 18
              ),
            ),
            Text(
              item['author'],
              style: TextStyle(
                fontSize: 14,
                color: Color.fromARGB(100, 0, 0, 0)
              ),
            )
          ],
        ),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing:10,
      mainAxisSpacing: 10,
      crossAxisCount: 3,
      //这里给比例可以解决
      childAspectRatio: 0.7,
      padding: EdgeInsets.all(10),
      children: this._getListData(),
    );
  }
}

(责任编辑:网页模板)
  • 本文标签:
  • flutter◢◤◢◤
解决flutter项目连接夜神模拟器的方法及运行白屏的问题
flutter 在vscode Terminal打包安卓apk,更改图标和app名