flutter - 如何通过单击不同的按钮向 ListView.builder 添加不同的元素？

Question

有 3 个按钮，当我单击这些按钮时，我希望它向 ListView.builder 添加不同的元素。

示例：点击红色按钮并添加一个红色开关按钮，我希望蓝色按钮添加一个蓝色开关按钮。

我编写的代码中的错误是：当我单击按钮时，它们的颜色都相同。我只想改变最后添加元素的颜色。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  int lc = 0;
  int buttonMode = 0;

  List<Widget> wid = [];
  List<bool> mode = List(50);
  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
            child: ListView.builder(
          itemCount: lc,
          itemBuilder: (ctx, inx) => sw(inx: inx, m: buttonMode),
        )),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          RaisedButton(
            color: Colors.blue,
            onPressed: () {
              setState(() {
                buttonMode = 0;
                lc++;
              });
            },
          ),
          RaisedButton(
            color: Colors.green,
            onPressed: () {
              setState(() {
                buttonMode = 1;

                lc++;
              });
            },
          ),
          RaisedButton(
            color: Colors.orange,
            onPressed: () {
              setState(() {
                buttonMode = 2;

                lc++;
              });
            },
          ),
        ],
      ),
    );
  }

  Widget sw({int inx, int m = 0}) {
    return buttonMode == 0
        ? Switch(
            onChanged: (d) {
              setState(() {
               
                mode[inx] = d;
              });
              print("$inx. index = $d");
            },
            value: mode[inx] != null ? mode[inx] : false,
          )
        : buttonMode == 1
            ? Switch(
                activeTrackColor: Colors.lightGreenAccent,
                activeColor: Colors.green,
                onChanged: (d) {
                  setState(() {
                 
                    mode[inx] = d;
                  });
                  print("$inx. index = $d");
                },
                value: mode[inx] != null ? mode[inx] : false,
              )
            : Switch(
                activeTrackColor: Colors.orangeAccent,
                activeColor: Colors.orange,
                onChanged: (d) {
                  setState(() {
                   
                    mode[inx] = d;
                  });
                  print("$inx. index = $d");
                },
                value: mode[inx] != null ? mode[inx] : false,
              );
  }
}

标签： flutterdart

Answer 1

您需要将 添加buttonModes到类内的列表_MyHomePageState并修改sw函数：

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  int lc = 0;
  int buttonMode = 0;

  List<Widget> wid = [];
  List<bool> mode = List(50);
  void incrementCounter() {
    setState(() {
      counter++;
    });
  }
  List<int> buttonModeList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
            child: ListView.builder(
              itemCount: lc,
              itemBuilder: (ctx, inx) => sw(inx: inx, m: buttonModeList[inx]),
            )),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          RaisedButton(
            color: Colors.blue,
            onPressed: () {
              setState(() {
                buttonModeList.add(0);
                lc++;
              });
            },
          ),
          RaisedButton(
            color: Colors.green,
            onPressed: () {
              setState(() {
                buttonModeList.add(1);
                lc++;
              });
            },
          ),
          RaisedButton(
            color: Colors.orange,
            onPressed: () {
              setState(() {
                buttonModeList.add(2);
                lc++;
              });
            },
          ),
        ],
      ),
    );
  }

  Widget sw({int inx, int m = 0}) {
    return m == 0
        ? Switch(
      onChanged: (d) {
        setState(() {

          mode[inx] = d;
        });
        print("$inx. index = $d");
      },
      value: mode[inx] != null ? mode[inx] : false,
    )
        : m == 1
        ? Switch(
      activeTrackColor: Colors.lightGreenAccent,
      activeColor: Colors.green,
      onChanged: (d) {
        setState(() {

          mode[inx] = d;
        });
        print("$inx. index = $d");
      },
      value: mode[inx] != null ? mode[inx] : false,
    )
        : Switch(
      activeTrackColor: Colors.orangeAccent,
      activeColor: Colors.orange,
      onChanged: (d) {
        setState(() {

          mode[inx] = d;
        });
        print("$inx. index = $d");
      },
      value: mode[inx] != null ? mode[inx] : false,
    );
  }
}