Flutter-我如何设计列表磁贴和列表视图

2exbekwf  于 2023-01-18  发布在  Flutter
关注(0)|答案(2)|浏览(108)

这就是我想要的结果。

这是我的当前输出。

我怎样才能实现这个结果,特别是在列表块之间的线?我使用ListView来显示规则。下面是我使用的ListTile的代码。

Widget ruleTile(String title) {
    return ListTile(
      contentPadding: EdgeInsets.zero,
      leading: Image.asset(
        "assets/images/sun.png",
        width: 40.w,
      ),
      title: Text(
        title,
        style: MyTextStyle.littlesmaller,
      ),
    );
  }
rxztt3cl

rxztt3cl1#

您可以使用Stackdotted_line包组合来创建如下内容:

Stack(children: [
            DottedLine(
              direction: Axis.vertical,
              lineLength: linelength,
              lineThickness: 1.0,
            )
            // You ListTile Code
          ],)
dauxcl2d

dauxcl2d2#

多亏了@pmatatias评论,我想通了,这是我用来获得想要的输出的更新代码。

Widget ruleTile(String title, num index) {
    Widget connector = const DashedLineConnector(
      color: Color(0xFFFACC15),
      gap: 3,
    );

    return TimelineTile(
      node: TimelineNode(
        indicator: Image.asset(
          "assets/images/sun.png",
          width: 40.w,
        ),
        startConnector: index == 0 ? null : connector,
        endConnector: index == rulesList.length - 1 ? null : connector,
      ),
      nodeAlign: TimelineNodeAlign.start,
      contents: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Text(
          title,
          style: MyTextStyle.littlesmaller,
        ),
      ),
    );
  }

相关问题