旧版代码的奇怪问题当 listView 滑动的时候,滑出 listView的范围之后,按钮的 文本Perman 会立即消失,而背景色的图片 image: AssetImage("assets/pinkBtn.png")却没有消失,
而是再往上滑动到SizedBox(height: 10,),的区域结束之后才消失
这个现象可能是因为在 Column 内部,ListView.builder 是在一个 Expanded 中,而 Expanded 会尽可能占据剩余空间,导致在滑动时超出 ListView 范围的部分也被渲染。
为了解决这个问题,可以将 Column 包裹在一个 SingleChildScrollView 中,这样在滑动时超出 ListView 范围的部分将会被隐藏,而不会显示出来
通过将 Column 包裹在 SingleChildScrollView 中,并设置 ListView.builder 的 physics 属性为 NeverScrollableScrollPhysics(),可以禁用 ListView 的滑动,
然后通过 shrinkWrap 属性将 ListView 的高度适应内容,这样超出范围的部分将会被隐藏,不再显示。


  Column(
  children: [
    SizedBox(height: 10,),
    Expanded(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 12),
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
              height: 160,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(
                    flex: 3,
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        image: DecorationImage(
                          image: AssetImage("assets/gameTest.png"),//活动的背景图片
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      alignment: Alignment.center,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            margin: EdgeInsets.only(left: 12),
                            child: Text(
                              "Agent joining activities",
                              style: TextStyle(
                                fontFamily: "Helvetica-Regular",
                                fontWeight: FontWeight.normal,
                                fontSize: 14,
                                color: Color(0xFF444444),
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(right: 12),
                            child: InkWell(
                              onTap: () {
                                // 按钮点击事件
                              },
                              child: Ink(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage("assets/pinkBtn.png"),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                child: Container(
                                  width: 54,
                                  height: 20,
                                  alignment: Alignment.center,
                                  child: Text(
                                    "Permanent",
                                    style: TextStyle(
                                      fontFamily: "Helvetica-Regular",
                                      fontWeight: FontWeight.normal,
                                      fontSize: 10,
                                      color: Color(0xFFFFFFFF),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    ),
  ],
);
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐