How to make a list of items flashing on each item sequentially automatically with respect to knowing the index of the current item with flutter

huangapple
go评论99阅读模式
英文:

How to make a list of items flashing on each item sequentially automatically with respect to knowing the index of the current item with flutter

问题

尝试使用Flutter使项目列表中的每个项目自动依次闪烁，以了解当前项目的索引。

英文:

trying to make a list of items flashing on each item sequentially automatically with respect to knowing the index of the current item with flutter

Like This Image

答案1

得分: 0

以下是您提供的代码的中文翻译部分：

  1. 如果我理解您的意思正确的话，这应该能解决问题：
  3. class HomePage extends StatefulWidget {
  4.   const HomePage({Key? key}) : super(key: key);
  6.   @override
  7.   State<HomePage> createState() => _HomePageState();
  8. }
  10. class _HomePageState extends State<HomePage>{
  12.   int currentIndex = 0;
  14.   @override
  15.   void initState() {
  16.     super.initState();
  17.     timerMethod();
  18.   }
  20.   void timerMethod(){
  21.     Timer(const Duration(seconds: 3), (){
  22.       setState(() {
  23.         currentIndex++;
  24.       });
  25.       if(currentIndex == 4) currentIndex = 0;
  26.       timerMethod();
  27.     });
  28.   }
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return Scaffold(
  33.       appBar: AppBar(
  34.         backgroundColor: Colors.black,
  35.       ),
  36.       body: ListView.builder(
  37.         itemCount: 4,
  38.         itemBuilder: (context, index) {
  39.           return Padding(
  40.             padding: const EdgeInsets.all(8.0),
  41.             child: ListTile(
  42.               shape: RoundedRectangleBorder(
  43.                 borderRadius: BorderRadius.circular(50)
  44.               ),
  45.               tileColor: currentIndex == index ? Colors.teal : Colors.tealAccent,
  46.               leading: const CircleAvatar(
  47.                 backgroundColor: Colors.white,
  48.                 child: Icon(Icons.person,color: Colors.teal,),
  49.               ),
  50.               title: Text("项目 ${index+1}"),
  51.             ),
  52.           );
  53.         },
  54.       ),
  55.     );
  56.   }
  57. }
英文:

If I understood you correctly. This should do the trick:

  1. class HomePage extends StatefulWidget {
  2.   const HomePage({Key? key}) : super(key: key);
  4.   @override
  5.   State&lt;HomePage&gt; createState() =&gt; _HomePageState();
  6. }
  8. class _HomePageState extends State&lt;HomePage&gt;{
  10.   int currentIndex = 0;
  12.   @override
  13.   void initState() {
  14.     super.initState();
  15.     timerMethod();
  16.   }
  18.   void timerMethod(){
  19.     Timer(const Duration(seconds: 3), (){
  20.       setState(() {
  21.         currentIndex++;
  22.       });
  23.       if(currentIndex == 4) currentIndex = 0;
  24.       timerMethod();
  25.     });
  26.   }
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Scaffold(
  31.       appBar: AppBar(
  32.         backgroundColor: Colors.black,
  33.       ),
  34.       body: ListView.builder(
  35.         itemCount: 4,
  36.         itemBuilder: (context, index) {
  37.           return Padding(
  38.             padding: const EdgeInsets.all(8.0),
  39.             child: ListTile(
  40.               shape: RoundedRectangleBorder(
  41.                 borderRadius: BorderRadius.circular(50)
  42.               ),
  43.               tileColor: currentIndex == index ? Colors.teal : Colors.tealAccent,
  44.               leading: const CircleAvatar(
  45.                 backgroundColor: Colors.white,
  46.                 child: Icon(Icons.person,color: Colors.teal,),
  47.               ),
  48.               title: Text(&quot;Item ${index+1}&quot;),
  49.             ),
  50.           );
  51.         },
  52.       ),
  53.     );
  54.   }
  55. }

huangapple
  • 本文由 发表于 2023年4月20日 00:03:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76056628.html
  • flutter
  • flutter-animation
  • flutter-dependencies
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定