任何人都可以帮忙制作这个精确的自定义小部件吗？这真的很有挑战性。我花了几个小时却无法完成

Question

这就是我正在寻找的。我能做的就是这个。 如果有人能帮忙那就太好了。 在下面的代码中，我使用 getx 进行状态更改和一些自定义内部自定义小部件。

为那些不熟悉 Getx 的人添加更多信息
代码中的 obx 只是一个用于更改状态的响应式小部件

    `Container(
          decoration: ContainerStyles(radius: 7, color: ColorConst.grey6)
              .borderRadiusCustom(),
          child: Obx(
            () => Row(
              children: [
                SizedBox(
                  width: 100,
                  child: NotificationListener(
                    child: Stack(
                      alignment: Alignment.centerLeft,
                      children: [
                        ListView(
                          controller: controller.scrollController,
                          padding: const EdgeInsets.only(left: 16),
                          scrollDirection: Axis.vertical,
                          children: List.generate(
                              100,
                              (index) => Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.start,
                                    children: [
                                      AnimatedContainer(
                                        duration:
                                            const Duration(milliseconds: 500),
                                        alignment: Alignment.bottomCenter,
                                        margin: const EdgeInsets.symmetric(
                                            horizontal: 4.5),
                                        width: /*(controller.scrollCount() ==
                                                index / 5
                                            ? 14
                                            :*/ (index % 5) == 0
                                                ? 38
                                                : 14,
                                        height: 1,
                                        color: ColorConst.black,
                                      ),
                                      Text(
                                          ((index % 5) == 0
                                              ? index~/5
                                              : "").toString() ,
                                          style: Theme.of(context)
                                              .textTheme
                                              .subtitle2),
                                    ],
                                  )).toList(),
                        ),
                        Transform.translate(
                          offset: const Offset(16, -10),
                          child: Container(
                            height: 1.3,
                            width: 70,
                            color: ColorConst.black,
                          ),
                        )
                      ],
                    ),
                    onNotification: (_) {
                      int calculatedIndex =
                          ((controller.scrollController.position.pixels +
                                      controller.scrollController.position
                                              .viewportDimension /
                                          2) /
                                  50)
                              .floor();
                      if (calculatedIndex != controller.scrollCount()) {
                        controller.scrollCount.value = calculatedIndex;
                        print(
                            'center item = ${controller.scrollCount.value}');
                      } else {
                        print(controller.scrollCount.value);
                      }
                      return true;
                    },
                  ),
                ),
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  margin: const EdgeInsets.only(bottom: 20),
                  decoration:
                      ContainerStyles(radius: 5, color: ColorConst.tertiary1)
                          .borderRadiusCustom(),
                  child: Text(
                    "${controller.scrollCount().toInt()}",
                    style: Theme.of(context)
                        .textTheme
                        .button
                        ?.changeSize(30)
                        .white(),
                  ),
                ),
              ],
            ),
          ),
        ),`

我期待像我在这里提供的图片一样的结果。

Answer 1

将此包用于标尺滑块：flutter_ruler_picker，https://pub.dev/packages/flutter_ruler_picker

为您量身定制