dart flutter应用程序,如何停止计数器初始化在所有的listview建设者列表,并在每一个单独初始化

jq6vz3qz  于 5个月前  发布在  Flutter
关注(0)|答案(2)|浏览(61)

当我按下按钮,它计数在所有的卡,我希望它计数在每一个对他们分别
使一个应用程序在Flutter,当我按下去按钮计数器工程在所有的卡,我希望它在每对他们分别计数,我希望有人帮助我.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:ziker/text_format.dart';

class TestPage extends StatefulWidget {
  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  // Create a list of texts
  final List<String> texts = [
   "Hello world",
"Hello world!2"

  ];

  final List<int> subTexts = [
    1,
    2,
  
  ];

  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(
          "أذكار الصباح",
          textDirection: TextDirection.rtl,
          style: GoogleFonts.arefRuqaa(
            fontSize: 24,
            fontWeight: FontWeight.w700,
            color: Colors.black,
          ),
        ),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(
          25,
        ),
        child: ListView.builder(
          // Set the length of the list
          itemCount: texts.length,
          // Return a Card widget for each item
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 8,
              ),
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                  //set border radius more than 50% of height and width to make circle
                ),
                // Use a Column to arrange the text and the buttons vertically
                child: Container(
                  padding: const EdgeInsets.all(25.0),
                  color: Colors.amber,
                  child: Column(
                    children: [
                      // Display the text inside the card
                      AmiriText(
                        text: texts[index],
                        fontS: 25,
                        textDirection: TextDirection.rtl,
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      CircleAvatar(
                        child: Text(
                          subTexts[index].toString(),
                        ),
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      // Use a Row to display the two buttons horizontally
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Color(0xFF086788),
                              foregroundColor: Color(0xFF9CAFB7),
                              shadowColor: Colors.grey[400],
                              elevation: 3,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(
                                  10.0,
                                ),
                              ),
                              minimumSize: Size(100, 40),
                            ),
                            child: AmiriText(
                              text: "return back",
                              fontS: 18,
                              color: Colors.white,
                            ),
                            onPressed: () {
                              setState(() {
                                if (counter > 0) {
                                  counter--;
                                }
                              });
                            },
                          ),
                          Text(
                            counter.toString(),
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                          ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Color(0xFF062726),
                              foregroundColor: Color(0xFF66A182),
                              shadowColor: Colors.grey[400],
                              elevation: 3,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(
                                  10.0,
                                ),
                              ),
                              minimumSize: Size(100, 40),
                            ),
                            child: AmiriText(
                              text: "Go",
                              fontS: 18,
                              color: Colors.white,
                            ),
                            onPressed: () {
                              setState(() {
                                counter++;
                              });
                            },
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

字符串
分别初始化它们中每一个,而不是全部

vwkv1x7d

vwkv1x7d1#

是的,它正在发生,因为你已经为所有列表视图项创建了一个单一的计数器变量。

int counter = 0;

字符串
您需要做的是为每个列表视图项创建一个单独的变量。
一种方法是使用int的List而不是单个int变量。

List<int> counters = [];


构建器将为每次迭代添加一个新变量。

counters.add(0);


您可以使用ListView.builder的索引访问它。

counters[index]++;


为了您的方便,我用你的代码示例来展示它。你可以使用下面的代码来测试它。

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  // Create a list of texts
  final List<String> texts = [
    "Hello world",
    "Hello world!2"

  ];

  final List<int> subTexts = [
    1,
    2,
  ];

  // int counter = 0;
  List<int> counters = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          "أذكار الصباح",
          textDirection: TextDirection.rtl,
        ),
        centerTitle: true,
      ),
      body: Container(
        padding: const EdgeInsets.all(
          25,
        ),
        child: ListView.builder(
          // Set the length of the list
          itemCount: texts.length,
          // Return a Card widget for each item
          itemBuilder: (context, index) {
            counters.add(0);
            return Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 8,
              ),
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                  //set border radius more than 50% of height and width to make circle
                ),
                // Use a Column to arrange the text and the buttons vertically
                child: Container(
                  padding: const EdgeInsets.all(25.0),
                  color: Colors.amber,
                  child: Column(
                    children: [
                      // Display the text inside the card
                      AmiriText(
                        text: texts[index],
                        fontS: 25,
                        textDirection: TextDirection.rtl,
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      CircleAvatar(
                        child: Text(
                          subTexts[index].toString(),
                        ),
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      // Use a Row to display the two buttons horizontally
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Color(0xFF086788),
                              foregroundColor: Color(0xFF9CAFB7),
                              shadowColor: Colors.grey[400],
                              elevation: 3,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(
                                  10.0,
                                ),
                              ),
                              minimumSize: Size(100, 40),
                            ),
                            child: AmiriText(
                              text: "return back",
                              fontS: 18,
                              color: Colors.white,
                            ),
                            onPressed: () {
                              setState(() {
                                if (counters[index] > 0) {
                                  counters[index]--;
                                }
                              });
                            },
                          ),
                          Text(
                            counters[index].toString(),
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                          ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Color(0xFF062726),
                              foregroundColor: Color(0xFF66A182),
                              shadowColor: Colors.grey[400],
                              elevation: 3,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(
                                  10.0,
                                ),
                              ),
                              minimumSize: Size(100, 40),
                            ),
                            child: AmiriText(
                              text: "Go",
                              fontS: 18,
                              color: Colors.white,
                            ),
                            onPressed: () {
                              setState(() {
                                counters[index]++;
                              });
                            },
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  AmiriText({required String text, required int fontS, Color? color, TextDirection? textDirection}) {
    return Text(text);
  }
}

mv1qrgav

mv1qrgav2#

考虑使用Maps的List,以便您可以标记每个参数:

final List<Map<String, dynamic>> texts = [
    {'title': 'Hello World',
      'number' : 1,
    'counter': 0},
    {'title': 'Hello World!2',
      'number': 2,
    'counter': 0},
  ];

字符串
现在,您可以像这样单独增加列表中每个项目的counter参数:

setState(() {
  if (texts[index]['counter'] > 0) {
    texts[index]['counter']--;
  }
});


查看完整的demo:
https://dartpad.dev/?id=093c9cf9ecd8f87a09c76c763e78c9e5

相关问题