放大/专注于列表视图中的中间列表瓷砖

发布于 2025-01-24 04:13:16 字数 1710 浏览 0 评论 0原文

我有一些列表瓷砖的列表视图：

 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将扩大。

这是我的目标：

这不一定必须在列表瓷砖中完成，我只是想重新创建将中间小部件放在屏幕上的效果集中在列表视图中。

原文

I have a list view with some list tiles:

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

Is there any way to always have the text in the middle list tile slightly enlarged to make it appear in focus? In this example, 4 would be enlarged and if I were to scroll down 5 would become enlarged.

Here is the effect I'm aiming for:

This doesn't necessarily have to be done within a list tile, I'm just looking to recreate this effect of putting the middle widget on the screen in focus in a list view.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小瓶盖 2025-01-31 04:13:16

有趣的是，一个名为listWheelsCrollview的内置窗口小部件具有放大属性，您可以设置。另外，您可以在列表中为 loop编写，因此您不必复制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,
        ),
    ],
  )

Interestingly, a built-in widget called ListWheelScrollView has a magnification property that you can set. Also, you can write for-loop in a list, so you don't have to copy-paste the 10 items like your demo code.

For example:

  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,
        ),
    ],
  )

回复收藏 0 原文

~没有更多了~