Я не могу получить кнопки для переключения значения при нажатии - PullRequest
Новая
       8

Я не могу получить кнопки для переключения значения при нажатии

1 голос
/ 25 апреля 2020

Введение: Я некоторое время пытался заставить цвет переключаться, когда нажимаю на фишку, но безуспешно. Было бы очень полезно для меня, если бы кто-то мог сказать мне, что я делаю неправильно в моем коде.

Ожидание: Я хочу, чтобы метод переключения переключал логическое значение isSelected. значение, когда чип нажата. Абсолютно ничего не происходит, когда я нажимаю кнопки. Я вижу, что значение меняется с истинного на ложное, но оно не меняет мой цвет, как ожидалось, и не изменяет значение снова после первого нажатия.

Код: 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Actions> actions = Actions.all();
    List<Widget> newWidgets = [];

    for (var i in actions) {
      newWidgets.add(myChips(
          isSelected: i.isSelected,
          chipName: i.name,
          function: () {
            setState(() {
              i.toggle();
              print(i.isSelected);
            });
          }));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Them'),
      ),
      body: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Test'),
              pinned: true,
              expandedHeight: 400.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset('assets/abc.png'),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Container(
                            child: Padding(
                              padding: const EdgeInsets.all(16.0),
                              child: Text(
                                'Name of Chips',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                          Wrap(
                            direction: Axis.horizontal,
                            spacing: 10.0,
                            runSpacing: 5.0,
                            children: newWidgets,
                          ),
                          categoryDivider(context),
                        ],
                      )
                    ],
                  ),
                ),
                childCount: 1,
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Container myChips({bool isSelected, String chipName, Function function}) {
    return Container(
      child: RaisedButton(
          color: isSelected ? Color(0xffeadffd) : Color(0xffededed),
          child: Text(
            chipName,
            style: TextStyle(
              color: new Color(0xff6200ee),
            ),
          ),
          onPressed: function,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0))),
    );
  }
}

// divider
Container categoryDivider(BuildContext context) {
  return Container(
    height: 1.0,
    width: MediaQuery.of(context).size.width,
    color: Colors.grey,
    margin: const EdgeInsets.only(left: 10.0, right: 10.0),
  );
}

class Actions {
  Actions({this.name});

  String name;
  bool isSelected = false;

  toggle() {
    isSelected = !isSelected;
    print(isSelected);
  }

  static List<Actions> all() {
    return [
      Actions(name: 'A'),
      Actions(name: 'B'),
      Actions(name: 'C'),
      Actions(name: 'D'),
      Actions(name: 'E'),
      Actions(name: 'F'),
      Actions(name: 'G'),
      Actions(name: 'H'),
      Actions(name: 'I'),
      Actions(name: 'J'),
      Actions(name: 'K'),
      Actions(name: 'L'),
    ];
  }
}

1 Ответ

1 голос
/ 25 апреля 2020

Что вы делали неправильно?

Вы возвращали новый список каждый раз, когда звоните all(), поэтому каждое действие повторно инициализировалось как неотключенное, и это происходило каждый раз, когда вы звоните setState() чтобы вы создавали новые действия, которые не нажимаются каждый раз,

решение: определите список только один раз и создайте для него получатель 

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Actions> actions = Actions.all;
    List<Widget> newWidgets = [];

    for (var i in actions) {
      newWidgets.add(myChips(
          isSelected: i.isSelected,
          chipName: i.name,
          function: () {
            setState(() {
              i.toggle();
              print(i.isSelected);
            });
          }));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Them'),
      ),
      body: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Test'),
              pinned: true,
              expandedHeight: 400.0,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Container(
                            child: Padding(
                              padding: const EdgeInsets.all(16.0),
                              child: Text(
                                'Name of Chips',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                          Wrap(
                            direction: Axis.horizontal,
                            spacing: 10.0,
                            runSpacing: 5.0,
                            children: newWidgets,
                          ),
                          categoryDivider(context),
                        ],
                      )
                    ],
                  ),
                ),
                childCount: 1,
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Container myChips({bool isSelected, String chipName, Function function}) {
    return Container(
      child: RaisedButton(
          color: isSelected ? Color(0xffeadffd) : Color(0xffededed),
          child: Text(
            chipName,
            style: TextStyle(
              color: new Color(0xff6200ee),
            ),
          ),
          onPressed: function,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0))),
    );
  }
}

// divider
Container categoryDivider(BuildContext context) {
  return Container(
    height: 1.0,
    width: MediaQuery.of(context).size.width,
    color: Colors.grey,
    margin: const EdgeInsets.only(left: 10.0, right: 10.0),
  );
}

class Actions {
  Actions({this.name});

  String name;
  bool isSelected = false;

  toggle() {
    isSelected = !isSelected;
    print(isSelected);
  }

  static List<Actions>  _all =
     [
      Actions(name: 'A'),
      Actions(name: 'B'),
      Actions(name: 'C'),
      Actions(name: 'D'),
      Actions(name: 'E'),
      Actions(name: 'F'),
      Actions(name: 'G'),
      Actions(name: 'H'),
      Actions(name: 'I'),
      Actions(name: 'J'),
      Actions(name: 'K'),
      Actions(name: 'L'),
    ];
  static get all => _all;
}
...