在Flutter中创建类似的列表滚动视图。

huangapple go评论64阅读模式
英文:

Create similiar list scroll in flutter

问题

 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,
                ),
              ),
            ),
          ),
        ),
      ],
    );
英文:

在Flutter中创建类似的列表滚动视图。

Does anyone have any idea how I could do that in flutter? The space between item 32 - 31 is larger than that between 31 - 30 and the color in item 30, 29 is gray compared to 31 which is white. Same with the items at the bottom.

ScrollTile is a simple Center Widget that has as a child a Text.

I tried like that, but I got stuck, I'm at first in the flutter:

 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&lt;Widget&gt;.generate(
                selection.length,
                (index) =&gt; ScrollTile(
                  selection: selection[index].toString(),
                  selectedColor: currentSelection == selection[index]
                      ? kPrimary500
                      : kWhite,
                ),
              ),
            ),
          ),
        ),
      ],
    );

答案1

得分: 0

你可以参考以下的代码:

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表示最小)。

将会看起来像这样:【图片链接】。

英文:

You can refer to the below code:

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) =&gt; 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) =&gt; const Divider(
                  thickness: 5,
                  color: Colors.indigo,
                ))
          ],
        ),
      ),
    );
  }

It's not the perfect way to do this, but will work for your use case.

You can change the height and width from the SizedBox, if you want to edit spacing between the numbers you can increase/decrease the viewportFraction property of pageController(1.0 means max and 0.0 means min).

and will look like this:

在Flutter中创建类似的列表滚动视图。

huangapple
  • 本文由 发表于 2023年6月1日 15:07:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76379444.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定