前言

前面已经用 RecyclerView 和 Compose实现了效果:

Flutter 必须也安排上~

实现

老规矩, 先看效果:

由于有前面两种实现方式的经验, Flutter 就有点轻车熟路了, 直接上关键代码:

ListView.builder(
    itemCount: controller.listData.length + 1,
    itemBuilder: (context, index) {
      if(index == 0) {
        return InkWell(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
          onTap: () {
            EasyLoading.showToast("昼白");
          },
          child: Container(
            height: 80,
            alignment: Alignment.center,
            child: const Text("昼白", style: TextStyle(color: Color(0xFF666666), fontSize: 17)),
          ),
        );
      } else {
        return Obx(() => ParallelWidget(controller.listData[index - 1]));
      }
    })

InkWell(
  splashColor: Colors.transparent,
  highlightColor: Colors.transparent,
  onTap: () {
    EasyLoading.showToast(mThemeInfo.textDesc);
  },
  child: Stack(
    alignment: Alignment.center,
    children: [
      CustomPaint(
        painter: ParallelPainter(mThemeInfo.bgColor),
        size: const Size(double.infinity, 90),
      ),
      Container(
        margin: const EdgeInsets.only(top: 25),
        child: Text(mThemeInfo.textDesc, style: TextStyle(color: mThemeInfo.textColor, fontSize: 17)),
      )
    ],
  ),
)

void paint(Canvas canvas, Size size) {
  var width = size.width;
  var height = 120;
  mPath.moveTo(0, 30);
  mPath.lineTo(width, 2);
  mPath.lineTo(width, (height - 30));
  mPath.lineTo(0, (height - 2));

  canvas.drawPath(mPath, mPaint);
}

看关键代码可知, Flutter 和 Compose 的实现方式很是相似. 都是通过 Canvas 绘制超出父容器的方式来实现的

总结

至此, 这种倾斜的列表, 已经用 Android 的 RecyclerView/Compose和 Fultter 实现了一遍.

其实现历程, 整体个人感悟就是:

多去从不同的方面思考, 把问题细节化, 很多困难会迎刃而解

很多时候影响发展的不是你的能力, 而是眼界

Android-倾斜列表-Flutter篇

前言

实现

总结