dart 创建类似的列表滚动抖动

idfiyjo8 于 2023-06-19 发布在其他

关注(0)|答案(1)|浏览(176)

有谁知道我是怎么在慌乱中做到的吗？项目32 - 31之间的空间大于项目31 - 30之间的空间，并且项目30、29中的颜色是灰色的，而项目31是白色的。底部的项目也是如此。
ScrollTile是一个简单的中心小部件，它有一个子文本。
我试过了，但我被卡住了，我一开始很激动：

return Stack(
      children: [
        Positioned(
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          child: SizedBox(
            height: 60,
            width: 200,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 70,
                    height: 4,
                    decoration: const BoxDecoration(
                      color: kPrimary500,
                    ),
                  ),
                  const SizedBox(
                    height: 100,
                  ),
                  Container(
                    width: 70,
                    height: 4,
                    decoration: const BoxDecoration(
                      color: kPrimary500,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(top: 40, bottom: 40),
          child: ListWheelScrollView.useDelegate(
            controller: FixedExtentScrollController(
              initialItem: 15,
            ),
            itemExtent: 50,
            perspective: 0.0000000001,
            diameterRatio: 1.6,
            physics: const FixedExtentScrollPhysics(),
            squeeze: 0.6,
            useMagnifier: true,
            magnification: 1.6,
            onSelectedItemChanged: (index) {
              setState(() {
                currentSelection = selection[index];
              });
            },
            childDelegate: ListWheelChildLoopingListDelegate(
              children: List<Widget>.generate(
                selection.length,
                (index) => ScrollTile(
                  selection: selection[index].toString(),
                  selectedColor: currentSelection == selection[index]
                      ? kPrimary500
                      : kWhite,
                ),
              ),
            ),
          ),
        ),
      ],
    );

dart

来源：https://stackoverflow.com/questions/76379444/create-similiar-list-scroll-in-flutter

1条答案

按热度按时间

yizd12fk1#

你可以参考下面的代码：

PageController con = PageController(
    viewportFraction: 0.2,
    initialPage: 5,
  );
  int currentValue = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 400,
          width: 80,
          child: Stack(
            children: [
              _surroundingBars(),
              PageView(
                physics: const BouncingScrollPhysics(),
                controller: con,
                scrollDirection: Axis.vertical,
                onPageChanged: (index) => setState(() {
                  currentValue = index;
                }),
                children: [
                  ...List.generate(
                      100,
                      (index) {
                        return Center(
                              child: Text(
                            index.toString(),
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: currentValue == index
                                    ? 54
                                    : currentValue == index - 1 || currentValue == index + 1
                                        ? 36
                                        : 28,
                                color: currentValue == index
                                    ? Colors.indigo
                                    : currentValue == index - 1 || currentValue == index + 1
                                        ? Colors.grey
                                        : Colors.grey.withOpacity(0.5)),
                          ));
                      })
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _surroundingBars(){
    return  Center(
      child: SizedBox(
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ...List.generate(
                2,
                    (index) => const Divider(
                  thickness: 5,
                  color: Colors.indigo,
                ))
          ],
        ),
      ),
    );
  }

这不是一个完美的方式来实现这一点，但将适用于您的用例。
您可以从SizedBox更改高度和宽度，如果您想编辑数字之间的间距，您可以增加/减少pageController的viewportFraction属性（1.0表示最大值，0.0表示最小值）。
看起来像这样：

赞(0）回复(0）举报 2023-06-19

我来回答

dart 创建类似的列表滚动抖动

1条答案

相关问题

热门标签

最新问答