Flutter - ListWheelScrollView放大镜不能放大图像?

w3nuxt5m  于 2023-03-24  发布在  Flutter
关注(0)|答案(2)|浏览(182)

我正在测试ListWheelScrollView,注意到放大镜跳过了图像和图标。我们能改变一下吗?这是一个例子。另外,我们能改变所选项目的颜色吗?例如,将当前缩放的项目着色,其他项目为白色。

List<Widget> items = [
  ListTile(
    leading: Icon(Icons.local_activity, size: 50),
    title: Text('Activity'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_airport, size: 50),
    title: Text('Airport'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_atm, size: 50),
    title: Text('ATM'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_bar, size: 50),
    title: Text('Bar'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_cafe, size: 50),
    title: Text('Cafe'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_car_wash, size: 50),
    title: Text('Car Wash'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_convenience_store, size: 50),
    title: Text('Heart Shaker'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_dining, size: 50),
    title: Text('Dining'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_drink, size: 50),
    title: Text('Drink'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_florist, size: 50),
    title: Text('Florist'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_gas_station, size: 50),
    title: Text('Gas Station'),
    subtitle: Text('Description here'),
  ),
  ListTile(
    leading: Icon(Icons.local_grocery_store, size: 50),
    title: Text('Grocery Store'),
    subtitle: Text('Description here'),
  ),
];

        Container(
          height: 400,
          child: ListWheelScrollView(
            itemExtent: 75,
            children: items,
            useMagnifier: true,
            magnification: 1.5,
            physics: FixedExtentScrollPhysics(),
            diameterRatio: 4,
            perspective: 0.0000000001,
            onSelectedItemChanged: (index) => {print(index)},
          ),
        )
ccrfmcuu

ccrfmcuu1#

与此同时,谷歌在github上也提出了解决方案。

cgyqldqp

cgyqldqp2#

将svg图标转换为ttf字体并使用生成的IconData。在这种情况下,图像将正确显示并支持放大和不透明度属性
SVG -〉TTF转换器:https://www.fluttericon.com/
添加生成的ttf作为字体资源:

flutter:
  fonts:
    - family: generated_font_family
      fonts:
        - asset: lib/assets/generated_font.ttf

从字体应用图标示例:

Icon(
  GeneratedIconsData.anyIcon,
)

相关问题