Question

代码段是维护每个ListView项目的状态。此代码适用于复选框样式，我正在寻找一次选择。我只想选择一项，寻找解决方案。

单选按钮的逻辑是必需的。例如，有一个水平的圆形列表，当用户单击单个圆形时，它应该具有边框。当用户单击其他圆圈时，所有其他圆圈边框都应删除边框。

void main() {
  runApp(new MaterialApp(
    home: new ListItemDemo(),
  ));
}

class ListItemDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: new ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return new MyListItem(
              title: "Hello ${index + 1}",
            );
          }),
    );
  }
}

class MyListItem extends StatefulWidget {
  final String title;

  MyListItem({this.title});

  @override
  _MyListItemState createState() => new _MyListItemState();
}

class _MyListItemState extends State<MyListItem> {
  bool isSelected;

  @override
  void initState() {
    super.initState();
    isSelected = false;
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new Text("${widget.title} ${isSelected ? "true" : "false"}"),
        new RaisedButton(
          onPressed: () {
            if (isSelected) {
              setState(() {
                isSelected = false;
              });
            } else {
              setState(() {
                isSelected = true;
              });
            }
          },
          child: new Text("Select"),
        )
      ],
    );
  }
}

Answer 1

肮脏的解决方案：只需维护一个boolean数组即可，每个元素都引用列表中每个元素的状态（无论是否选中）。当然，每次选择时，由于要执行类似于无线电的逻辑，因此数组中应该只有一个“ true”值。

我编辑了您的代码。只是检查错误，因为我没有运行它：

void main() {
  runApp(new MaterialApp(
    home: new ListItemDemo(),
  ));
}

class ListItemDemo extends StatelessWidget {
  var arrayState = [false,false,false,false,false,false,false,false,false,false];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: new ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return new MyListItem(
              title: "Hello ${index + 1}",
              array: arrayState, 
              setter: changeArrayState,
              ind: index,
            );
          }),
    );
  }

  void changeArrayState(int index)
  {
      for(int i=0; i<arrayState.length; i++)
      {
          arrayState[i] = false;
      }

      arrayState[index] = true;
  }
}

class MyListItem extends StatefulWidget {
  final String title;
  final List<bool> arrayState;
  final void Function(int) changeState;
  final int index;

  MyListItem({this.title, this.arrayState, this.changeState, this.index});

  @override
  _MyListItemState createState() => new _MyListItemState();
}

class _MyListItemState extends State<MyListItem> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new Text("${widget.title} ${widget.arrayState[widget.index] ? "true" : "false"}"),
        new RaisedButton(
          onPressed: () {

              setState(() {
                widget.changeArrayState(widget.index);
                //change the border the way you like
              });

          },
          child: new Text("Select"),
        )
      ],
    );
  }
}

Flutter单选按钮自定义以选择单个项目

1 个答案: