Как через провайдера следить за состоянием многих коммутаторов - PullRequest
Новая
       83

Как через провайдера следить за состоянием многих коммутаторов

0 голосов
/ 18 июня 2020

enter image description here Это модель с ChangeNotifier; 

class SuspiciousContentModel with ChangeNotifier {
  String suspiciousContentName;
  String suspiciousContentWords;
  int suspiciousContentWordsNum;
  bool _isSwitched = false;

  bool get isSwitched => _isSwitched;
  set isSwitchedSet(bool newBool) {
    _isSwitched = newBool;
    notifyListeners();
  }
}

Этот экран ниже я прикреплю, как он выглядит в работе 

class SuspiciousContentScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 1.0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Navigator.pop(context),
        ),
        backgroundColor: Colors.white,
        title: Text('Suspicious Content',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.normal,
            )),
        centerTitle: true,
      ),
      body: SuspiciousContentWidgetBuilder(),
    );
  }
}

пользовательский элемент, поэтому что вы можете пройти в будущем с помощью ListViewBuilder 

class SuspiciousContentItem extends StatelessWidget {
  const SuspiciousContentItem({
    this.suspiciousContentName,
    this.suspiciousContentWords,
    this.suspiciousContentWordsNum,
    this.isSwitched,
  });

  final String suspiciousContentName;
  final String suspiciousContentWords;
  final int suspiciousContentWordsNum;
  final bool isSwitched;


  @override
  Widget build(BuildContext context) {
    final providerSuspicious = Provider.of<SuspiciousContentModel>(context);

    return Container(
      margin: EdgeInsets.only(left: 27, right: 27),
      height: 94.0,
      decoration: const BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 1, color: Color.fromRGBO(83, 83, 83, 1)),
        ),
      ),
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  '$suspiciousContentName',
                  style: TextStyle(
                    color: Color.fromRGBO(83, 83, 83, 1),
                    height: 1.5,
                    fontSize: 16.0,
                  ),
                ),
                Text(
                  '$suspiciousContentWordsNum words',
                  style: TextStyle(
                    color: Color.fromRGBO(129, 147, 174, 1),
                    height: 1.6,
                    fontSize: 10.4,
                  ),
                ),
              ],
            ),
            // TODO: add gradient to switch activeColor
            ShaderMask(
              child: CupertinoSwitch(
                trackColor: Color.fromRGBO(129, 147, 174, 1),
                activeColor: Color.fromRGBO(86, 168, 235, 1),
                value: providerSuspicious.isSwitched,
                onChanged: (value) => {
                  print(value),
                  providerSuspicious.isSwitched
                      ? providerSuspicious.isSwitchedSet = false
                      : providerSuspicious.isSwitchedSet = true
                },
              ),
              shaderCallback: (r) {
                return LinearGradient(
                  colors: providerSuspicious.isSwitched
                      ? [Colors.white, Colors.white]
                      : [Colors.white, Colors.white],
                ).createShader(r);
              },
            ),
          ]),
    );
  }
}

ListView builder; 

class SuspiciousContentWidgetBuilder extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return ListView.builder(
          itemCount: listSuspiciousContentItem.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () => {
    print('works'),
                //Navigator.of(context).push(MaterialPageRoute<void>(
              //      builder: (context) => SuspiciousContentAddWordsScreen(
             //             suspiciousContentName: listSuspiciousContentItem\[index\]
             //                 .suspiciousContentName,
              //            suspiciousContentWords: listSuspiciousContentItem\[index\]
             //                 .suspiciousContentWords,
             //             suspiciousContentWordsNum:
             //                 listSuspiciousContentItem\[index\]
             //                     .suspiciousContentWordsNum,
              //          ))),
              },
              child: SuspiciousContentItem(
                suspiciousContentName:
                    listSuspiciousContentItem[index].suspiciousContentName,
                suspiciousContentWords:
                    listSuspiciousContentItem[index].suspiciousContentWords,
                suspiciousContentWordsNum:
                    listSuspiciousContentItem[index].suspiciousContentWordsNum,
              ),
            );
          },
        );
      }
    }

List of SuspiciousContentItem; 

List<SuspiciousContentItem> listSuspiciousContentItem = [
  SuspiciousContentItem(
    suspiciousContentName: 'Buyling',
    suspiciousContentWords: '',
    suspiciousContentWordsNum: 22,
    //suspiciousContentArray: [],
  ),
  SuspiciousContentItem(
    suspiciousContentName: 'Alcohol',
    suspiciousContentWords: '',
    suspiciousContentWordsNum: 3,
  ),
  SuspiciousContentItem(
    suspiciousContentName: 'Tobaco',
    suspiciousContentWords: '',
    suspiciousContentWordsNum: 12,
  ),
];

Теперь это работает вот так, это что нужно для создания сеттера и гетера в модели для каждого коммутатора? Кто может помочь?)))

1 Ответ

0 голосов
/ 23 июня 2020

Рефакторинг моего кода, я добавляю логическое значение включено / выключено 

List<SuspiciousContentItem> listSuspiciousContentItem = [
  SuspiciousContentItem(
    isSwitched: false,
    suspiciousContentName: 'Buling',
    suspiciousContentArray: ['test', 'test2', 'test3', 'test4;o', 'test5'],
  ),
  SuspiciousContentItem(
    isSwitched: false,
    suspiciousContentName: 'Alcohol',
    suspiciousContentArray: [
      'Beer',
      'Bar',
      'Cockatils',
      'Wine',
      'Martini',
      'Whiskey',
      'Drink',
      'Margarita',
      'Cider',
      'Hangover',
      'Vermouth',
      'Rum',
      'Liquor',
      'Spirits',
      'Vodka',
      'Gin',
      'Drunk',
      'Aperol',
      'Champagne',
      'Brandy',
      'Sake',
      'Mojito',
    ],
  ),
  SuspiciousContentItem(
    isSwitched: false,
    suspiciousContentName: 'Tobaco',
    suspiciousContentArray: [
      'Beer',
      'Bar',
      'Cockatils',
      'Wine',
      'Martini',
      'Whiskey',
      'Drink',
      'Margarita',
      'Cider',
      'Hangover',
      'Vermouth',
      'Rum',
      'Liquor',
      'Spirits',
      'Vodka',
      'Gin',
      'Drunk',
      'Aperol',
      'Champagne',
      'Brandy',
      'Sake',
      'Mojito',
    ],
  ),
];

В конструкторе виджетов я добавляю isSwitched и по индексу мы можем отслеживать каждый переключатель 

class SuspiciousContentWidgetBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listSuspiciousContentItem.length,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () => {
            Navigator.of(context).push(MaterialPageRoute<void>(
                builder: (context) => SuspiciousContentAddWordsScreen(
                      suspiciousContentName: listSuspiciousContentItem[index]
                          .suspiciousContentName,
                      suspiciousContentArray: listSuspiciousContentItem[index]
                          .suspiciousContentArray,
                    ))),
          },
          child: SuspiciousContentItem(
            suspiciousContentName:
                listSuspiciousContentItem[index].suspiciousContentName,
            isSwitched: listSuspiciousContentItem[index].isSwitched,
            suspiciousContentArray:
                listSuspiciousContentItem[index].suspiciousContentArray,
          ),
        );
      },
    );
  }
}

и рефакторинг CupertinoSwitch 

 ShaderMask(
              child: CupertinoSwitch(
                trackColor: Color.fromRGBO(129, 147, 174, 1),
                activeColor: Color.fromRGBO(86, 168, 235, 1),
                value: widget.isSwitched ?? false,
                onChanged: (value) => {
                  widget.isSwitched = value,
                  setState(() {
                    widget.isSwitched = value;
                  }),
                },
              ),
              shaderCallback: (r) {
                return LinearGradient(
                  colors: widget.isSwitched
                      ? [Colors.white, Colors.white]
                      : [Colors.white, Colors.white],
                ).createShader(r);
              },
            ),
...