Удалить выделение в списке после второго клика по флаттер-списку

У меня есть список, который показывает список строк, код здесь ниже:

class CmCoinsValue extends StatefulWidget {
  @override
  _CmCoinsValueState createState() => new _CmCoinsValueState();
}

class _CmCoinsValueState extends State<CmCoinsValue> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(8),
        itemCount: CoinsChoice.coins.length,
        itemBuilder: (BuildContext context, int index) {
          return FlatButton(
            onPressed: () {
              if (selected) {
                // Again Click on Same Item
                setState(() {
                  selected = false;
                });
                // Set to -1 to indicate nothing is selected!
              } else {
                setState(() {
                  selected = true;
                });
                // Set Index to note the Selected Item
              }
            },
            child: new Card(
              color: Colors.lightBlueAccent,
              shape: selected // Check whether it is selected
                  ? new RoundedRectangleBorder(
                      side: new BorderSide(color: Colors.redAccent, width: 6.0),
                      borderRadius: BorderRadius.circular(4.0))
                  : new RoundedRectangleBorder(
                      side: new BorderSide(color: Colors.transparent, width: 2.0),
                      borderRadius: BorderRadius.circular(4.0)),
              child: new Padding(
                padding: const EdgeInsets.all(4.0),
                child: Container(
                  height: 35,
                  width: 100,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Text(
                        '${CoinsChoice.coins[index]}',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        });
  }
}

проблема в том, что на данный момент я не добился того, чего хотел. На самом деле, если я нажму на элемент, все элементы будут выбраны, и для всех появится граница, я хочу, прежде всего, если я нажму еще раз, элемент будет отменен, и я хочу, чтобы был выбран только один элемент, а не выбрано все . есть информация об этом?


person Tizi Dev    schedule 10.10.2020    source источник
comment
вам нужно использовать индекс, чтобы проверить, какой элемент выбран.   -  person John Joe    schedule 10.10.2020
comment
а как снять выделение с пункта?   -  person Tizi Dev    schedule 10.10.2020


Ответы (1)


Я мог бы дать вам идею. Сделайте что-нибудь вроде этого,

class _CmCoinsValueState extends State<CmCoinsValue> {
  bool selected = false;
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(8),
        itemCount: CoinsChoice.coins.length,
        itemBuilder: (BuildContext context, int index) {
          return FlatButton(
            onPressed: (){
              if(selectedIndex == index) {    // Again Click on Same Item
                  setState(() {
                     selectedIndex = -1;
                     selected = false;
                   });  
                // Set to -1 to indicate nothing is selected!
              } else {
                setState(() {
                  selectedIndex = index;
                  selected = true;    
                });
                // Set Index to note the Selected Item
              }
            },
            child: new Card(
              color: Colors.lightBlueAccent,
              shape: ( selected && selectedIndex == index)      // Check whether it is selected
                  ? new RoundedRectangleBorder(
                  side: new BorderSide(color: Colors.redAccent, width: 6.0),
                  borderRadius: BorderRadius.circular(4.0))
                  : new RoundedRectangleBorder(
                  side: .......

Надеюсь, это работает!

person Shri Hari    schedule 10.10.2020
comment
большое спасибо, но я понимаю: тип 'bool' не является подтипом типа 'int' 'результата функции' - person Tizi Dev; 10.10.2020
comment
Вы изменили bool на int selected = -1; в первой строке? - person Shri Hari; 10.10.2020
comment
Да, именно так, как вы мне написали: int selected = -1; - person Tizi Dev; 10.10.2020
comment
Если вы все еще получаете ошибку, вы можете опубликовать код еще раз? - person Shri Hari; 10.10.2020
comment
Я думаю, что код идеален. Обходной путь к файлу, чтобы у вас могла быть переменная selected в любом другом месте. Тогда вы получите представление - person Shri Hari; 10.10.2020
comment
Я снова отредактировал код, и теперь он работает, выбирая и отменяя действие, единственная проблема заключается в том, что он выбирает и отменяет выбор всех элементов, а не только одного. - person Tizi Dev; 10.10.2020
comment
У меня только один последний вопрос, если я хочу разрешить множественный выбор, что редактировать, пожалуйста? - person Tizi Dev; 10.10.2020
comment
Я думаю, тогда вы можете выбрать массив, например selectedIndexes = [], и добавлять и удалять индексы в массиве. См.: api.dart.dev/stable/2.10. 1/dart-core/List-class.html - person Shri Hari; 10.10.2020