如何仅在列表视图中增加特定于其单个列表的计数器？扑

Question

您好，我是 Flutter 的初学者。我的应用程序中有一个问题，我想为生成的每个列表添加单独的计数器。到目前为止，我的代码将运行该应用程序，因此如果我单击列表，它也会增加以下列表中的数字。我不希望我希望它单独增加。有人可以帮忙吗。将不胜感激。

import 'package:flutter/material.dart';

void main() {
  //what you want to start whenever you start the function
  runApp(MyApp());
}

class Post {
  String body;
  int likes = 0;
  bool hasbeenLiked = true;
  void likePost() {
    this.likes++;
  }
}

List<String> todoList = [];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Habit Tracker',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = TextEditingController();
  var post = Post();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Habbit Tracker")),
      body: Column(children: <Widget>[
        Expanded(
          child: Container(
            child: ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('${todoList[index]}'),
                  trailing: Icon(Icons.arrow_circle_up_sharp),
                  subtitle: Text(post.likes.toString()),
                  onTap: () {
                    setState(() {
                      post.likePost();
                    });
                  },
                  onLongPress: () {
                    setState(() {
                      todoList.removeAt(index);
                    });
                  },
                );
              },
              separatorBuilder: (BuildContext context, int index) => Divider(),
              itemCount: todoList.length,
            ),
          ),
        ),
        TextField(
            controller: this.controller,
            decoration: InputDecoration(
                prefixIcon: Icon(Icons.brightness_1),
                hintText: "Enter your habit",
                suffixIcon: FloatingActionButton(
                    child: Icon(Icons.add),
                    onPressed: () {
                      setState(() {
                        todoList.add(controller.text);
                      });
                    })))
      ]),
    );
  }
}

Answer 1

您需要为 ListView 中的每个元素添加一个按钮。然后您可以使用相关按钮定义计数器。

import 'package:flutter/material.dart';

void main() {
  //what you want to start whenever you start the function
  runApp(MyApp());
}

class Post {
  String body;
  String text; // I added to connect the text with the model "Post".
  int likes = 0;

  
  Post([this.text]); // This will be an optional parameter in the constructor of class.

  bool hasbeenLiked = true;
  void likePost() {
    this.likes++;
  }
}

List<Post> todoList = [];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Habit Tracker',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = TextEditingController();
  var post = Post();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Habbit Tracker",
        ),
      ),
      body: Column(children: <Widget>[
        Expanded(
          child: Container(
            child: ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('${todoList[index].text}'),
                  trailing: Icon(Icons.arrow_circle_up_sharp),
                  subtitle: Text(todoList[index].likes.toString()),
                  onTap: () {
                    setState(() {
                      // Here, we have to like the indexed post.
                      todoList[index].likePost();
                    });
                  },
                  onLongPress: () {
                    setState(() {
                      todoList.removeAt(index);
                    });
                  },
                );
              },
              separatorBuilder: (BuildContext context, int index) => Divider(),
              itemCount: todoList.length,
            ),
          ),
        ),
        TextField(
          controller: this.controller,
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.brightness_1),
            hintText: "Enter your habit",
            suffixIcon: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                setState(() {
                  // Here, we should add new model with parameter.
                  todoList.add(new Post(controller.text));
                });
              },
            ),
          ),
        ),
      ]),
    );
  }
}