颤振：ListWheelScrollView 放大镜不起作用

Posted 2023-02-23

【中文标题】颤振：ListWheelScrollView 放大镜不起作用

【英文标题】：Flutter: ListWheelScrollView magnifier not working

【发布时间】：2020-12-12 04:47:42

【问题描述】：

ListWheelScrollView 的放大镜是空的（只是一个白色的容器）

ListWheelScrollView(
  itemExtent: 60,
  magnification: 2,
  useMagnifier: true,
  children: List.generate(
     100,
      (index) => Card(
          key: ValueKey(index),
          color: Colors.blue,
          child: ListTile(
            title: Text(index.toString()),
          ))).toList(),
),

我做错了什么？ （运行flutter run -v和flutter doctor -v没有发现任何问题）

【参考方案1】：

您可以使用Container 代替Card 并为其设置水平padding：

ListWheelScrollView(
  itemExtent: 60,
  magnification: 1.5,
  useMagnifier: true,
  squeeze: 0.7,
  children: List.generate(
    100,
    (index) => Container(
      key: ValueKey(index),
      padding: EdgeInsets.symmetric(horizontal: 100),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: ListTile(
        title: Text(index.toString()),
      ),
    )).toList(),
),

结果：

除了使用ListTile 和水平padding，您可以将文本放在Center 小部件内，该小部件直接放在Container 内：

ListWheelScrollView(
  itemExtent: 60,
  magnification: 1.5,
  useMagnifier: true,
  squeeze: 0.7,
  children: List.generate(
    100,
    (index) => Container(
      key: ValueKey(index),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(index.toString()),
      ),
    )).toList(),
),

结果：