Flutter开发中的问题小结

2020-08-11  本文已影响0人  only_run

图片的圆角不显示的问题

//不起作用
Container(
            child: Image.network(
              pickList[index],
              fit: BoxFit.cover,
              colorBlendMode: BlendMode.plus,
            ),
            decoration: BoxDecoration(
                borderRadius:
                 BorderRadius.all(Radius.circular(Adapter.px(12)))),
          );

原因:Container的由三层图层叠加组成,decoration,child,foregroundDecoration;圆角设置到decoration被child的内容遮挡;
解决思路:图片加到decoration,或者child也设置圆角

Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(pickList[index]), fit: BoxFit.cover),
                borderRadius:
                    BorderRadius.all(Radius.circular(Adapter.px(12)))),
          );

ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(Adapter.px(5))),
              child: Image.network(
                '${inventory.imgUrl}',
                width: Adapter.px(150),
                height: Adapter.px(150),
                fit: BoxFit.cover,
              ),
            );

ListView嵌套GridView报错 需要指定GridView的高度

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.

原因:ListView,GridView默认都是垂直方向滚动,ListView并不知道嵌套的同方向的可滚动Widget(不仅仅是GridView,ListView+ListView也是这样)的高度
解决思路:GridView设置固定的高度;
或者GridView禁止滚动 设置physics: NeverScrollableScrollPhysics(),同时ListView和GridView 包裹内容 设置shrinkWrap: true

@override
  Widget buildContent(BuildContext context) {
    return Container(
      child: GridView.count(
        crossAxisCount: 2,
        children: list.map<Widget>((s) {
          return Container(
            height: Adapter.px(200),
            child: Text('item $s'),
            color: XColors.backGreen,
          );
        }).toList(),
        mainAxisSpacing: Adapter.px(10),
        crossAxisSpacing: Adapter.px(10),
        //child宽高比例
        childAspectRatio: 1.0,
        //收缩使包裹内容
        shrinkWrap: true,
        //滚动特性
        physics: NeverScrollableScrollPhysics(),
        //预加载尺寸范围(宽度/高度,由滚动方向决定)
        cacheExtent: Adapter.px(50),
      ),
    );
  }

其他参考:Flutter 问题收集及解决方案

上一篇 下一篇

猜你喜欢

热点阅读