Блог

фрагмент кода предназначен для поддержания состояния каждого элемента 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"),
        )
      ],
    );
  }
}
  

Грязное решение: просто поддерживайте, скажем, массив логических значений, где каждый элемент ссылается на состояние каждого элемента (где он выбран или нет) в списке. Конечно, при каждом выборе в вашем массиве должно быть только одно «истинное» значение, поскольку вы хотите выполнить логику, подобную радиосвязи.

Я отредактировал ваш код. Просто проверьте наличие ошибок, поскольку я не запускал это:

 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"),
        )
      ],
    );
  }
}