ListView颤振中的问题开关值

时间:2019-09-18 13:42:21

标签: android mobile flutter flutter-layout

我在ListView中为每个元素创建一个Switch小部件。当我单击开关时,所有元素的值都会更改。 我签入了flutter文档,dart文档...我想,我没有在onChanged方法中重新定位元素位置。

但是怎么办?

单击后,我的值isSwitched改变了。 感谢以下对象,我恢复了lignes:snapshot.data [index] .name

主题屏幕:

class _ThemePage extends State<ThemePage> {
  bool isSwitched = false;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("Blackbox"),
        leading: Image.asset(
          'assets/img/logo_ineat.png',
          fit: BoxFit.contain,
          height: 32,
        ),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Container(
                margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                child: new Text('Sélection du profil',
                    style: new TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold)),
                alignment: Alignment.topCenter),
            new Flexible(
              child: new Container(
                child: new FutureBuilder<List<t.Theme>>(
                    future: t.Theme().getThemes(),
                    builder: (BuildContext context, AsyncSnapshot snapshot) {
                      if (snapshot.hasData) {
                        if (snapshot.data != null) {
                          return new Column(
                            children: <Widget>[
                              new Expanded(
                                child: new ListView.builder(
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (BuildContext context, index) {
                                    return ListTile(
                                      title:
                                          new Text(snapshot.data[index].name),
                                          trailing: new Switch(
                                            value: isSwitched,
                                            activeColor: Colors.pink,
                                            activeTrackColor: Colors.pinkAccent,
                                            onChanged: (value){
                                              setState(() {
                                               isSwitched = value; 
                                               if(value==true) {
                                                 print(snapshot.data[index].name);
                                               }
                                              });
                                            },
                                          ),
                                    );
                                  },
                                ),
                              ),
                            ],
                          );
                        }
                      } else {
                        new Text("Loading...");
                        return new CircularProgressIndicator();
                      }
                    }),
              ),
            ),
            new Container(
              margin: EdgeInsets.only(right: 10.0),
              child: new RaisedButton.icon(
                /*onPressed: () {
                  Navigator.pushReplacement(context,
                      MaterialPageRoute(builder: (context) => Technologies()));
                },*/
                label: Text('Suivant'),
                icon: Icon(Icons.navigate_next),
              ),
              alignment: Alignment.bottomRight,
            ),
          ],
        ),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

您正在使用单个属性isSwitched来控制开关量

您可以

  • 创建另一个有状态的小部件,将您的开关逻辑放在此处(如果您想使用回调函数读取值)(更干净)
  • 创建布尔列表,而不是单个属性

您的第一个解决方案的代码:


class YourListViewItem extends StatefulWidget {

  final String title;

  const YourListViewItem({Key key, this.title}) : super(key: key);

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

class _YourListViewItemState extends State<YourListViewItem> {

  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title:
      new Text(widget.title),
      trailing: new Switch(
        value: isSwitched,
        activeColor: Colors.pink,
        activeTrackColor: Colors.pinkAccent,
        onChanged: (value){
          setState(() {
            isSwitched = value;
          });
        },
      ),
    );
  }
}


class _ThemePage extends State<ThemePage> {
  bool isSwitched = false;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("Blackbox"),
        leading: Image.asset(
          'assets/img/logo_ineat.png',
          fit: BoxFit.contain,
          height: 32,
        ),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Container(
                margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                child: new Text('Sélection du profil',
                    style: new TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold)),
                alignment: Alignment.topCenter),
            new Flexible(
              child: new Container(
                child: new FutureBuilder<List<t.Theme>>(
                    future: t.Theme().getThemes(),
                    builder: (BuildContext context, AsyncSnapshot snapshot) {
                      if (snapshot.hasData) {
                        if (snapshot.data != null) {
                          return new Column(
                            children: <Widget>[
                              new Expanded(
                                child: new ListView.builder(
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (BuildContext context, index) {
                                    return YourListViewItem(title: snapshot.data[index].name);
                                  },
                                ),
                              ),
                            ],
                          );
                        }
                      } else {
                        new Text("Loading...");
                        return new CircularProgressIndicator();
                      }
                    }),
              ),
            ),
            new Container(
              margin: EdgeInsets.only(right: 10.0),
              child: new RaisedButton.icon(
                /*onPressed: () {
                  Navigator.pushReplacement(context,
                      MaterialPageRoute(builder: (context) => Technologies()));
                },*/
                label: Text('Suivant'),
                icon: Icon(Icons.navigate_next),
              ),
              alignment: Alignment.bottomRight,
            ),
          ],
        ),
      ),
    );
  }
}