Enlarging/focusing 在列表视图的中间列表图块上

Question

我有一个带有一些列表块的列表视图：

 return Scaffold(
  body: ListView(
    children: const [
      ListTile(title: Text("1", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("2", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("3", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("4", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("5", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("6", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("7", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("8", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("9", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
    ],
  ),
);

有没有什么办法总是让中间列表块中的文本稍微放大以使其显示在焦点中？在这个例子中，4 会被放大，如果我向下滚动，5 会被放大。

这是我想要的效果：

这不一定必须在列表图块中完成，我只是想在列表视图中重现将屏幕上的中间小部件聚焦的效果。

Answer 1

有趣的是，一个名为 ListWheelScrollView 的 built-in 小部件有一个 magnification 属性可以设置。此外，您可以在列表中编写 for 循环，因此您不必像演示代码那样 copy-paste 10 个项目。

例如：

  ListWheelScrollView(
    itemExtent: 80,
    useMagnifier: true,
    magnification: 1.5, // magnify the center item 1.5x 
    perspective: 0.00001,
    children: [
      for (int i = 1; i < 10; i++)
        ListTile(
          title: Text('$i', textAlign: TextAlign.center),
          contentPadding: EdgeInsets.all(30),
          tileColor: Colors.red,
        ),
    ],
  )

Enlarging/focusing 在列表视图的中间列表图块上

Enlarging/focusing on middle list tile in list view

dart

flutter

flutter-animation