flutter - Flutter ListView 在手势上为项目设置动画

Question

我正在尝试在列表视图上实现一些动画反馈，当用户点击列表项时，它会缩小到 90%，当点击后返回到 100%。问题在于，为了更新保存比例值的变量的状态，所有列表项都会更新到该新比例。有什么解决办法吗？

标签： flutterdart

Answer 1

1. 使用 StatefulBuilder 仅为被点击的列表项设置状态。
2. OnTap 更改 setState() 中的比例值。

以下是供您参考的工作代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: DemoWidget(),
    );
  }
}

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterApp'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          double scale = 1;
          return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return ListTile(
                title: Transform.scale(
                    scale: scale,
                    child: Container(
                      child: Text(index.toString()),
                      color: Colors.amberAccent,
                    )),
                onTap: () {
                  setState(() {
                    scale = scale == 1 ? 0.9 : 1;
                  });
                },
              );
            },
          );
        },
      ),
    );
  }
}

希望对你有帮助，如有疑问请留言。如果这对您有用，请接受并投票赞成这个答案。