如何设置团队中切换按钮的值?

时间:2020-04-15 01:00:33

标签: flutter

如何为每个团队设置切换得分按钮的值?

例如,当按下团队A时,用户可以从得分按钮中进行选择。同样,如果团队B被按下,则用户可以从得分按钮中进行选择。但是只有选中的团队才能获得积分。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class QtyWidget extends StatefulWidget {
  String title;
  QtyWidget({this.title});
  @override
  _QtyWidgetState createState() => new _QtyWidgetState();
}

class _QtyWidgetState extends State<QtyWidget> {
  int _itemCount = 1;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      color: Colors.grey[200],
      child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
              child: Text(
                'Qty',
                style: TextStyle(
                    fontWeight: FontWeight.normal,
                    fontSize: 16,
                    color: Colors.grey[600]),
              ),
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(
                      color: Colors.amber[800],
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    IconButton(
                        icon: new Icon(Icons.remove),
                        onPressed: () {
                          setState(() {
                            _itemCount = _itemCount - 1;
                            if (_itemCount < 0) {
                              _itemCount = 1;
                            }
                          });
                        }),
                    Text(_itemCount.toString()),
                    IconButton(
                        icon: new Icon(Icons.add),
                        onPressed: () => setState(() => _itemCount++))
                  ],
                ),
              ),
            ),
          ]),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            QtyWidget(),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

团队按钮

 void scoreTeamA() {
    setState(() {
      outputTeamA += _choiceA;
    });
  }

 void scoreTeamB() {
    setState(() {
      outputTeamB += _choiceB;
    });
  }

得分按钮

      ToggleButtons(
        children: [
          Container(
            child: Text(
              'team A',
              textScaleFactor: 3,
            ),
          ),
          Text(
            'team B ',
            textScaleFactor: 3,
          ),
        ],
        onPressed: (int index) {
          setState(() {
            for (int buttonIndex = 0;
                buttonIndex < isSelected1.length;
                buttonIndex++) {
              if (buttonIndex == index) {
                isSelected1[buttonIndex] = true;
              } else {
                isSelected1[buttonIndex] = false;
              }
            }
          });
        },

胜利按钮

 ToggleButtons(
                children: [
                  Text('5 points'),
                  Text('6 points'),
                  Text('7 points'),
                ],
                onPressed: (int index) {
                  setState(() {
                    isSelected2[index] = !isSelected2[index];
                    switch (index) {
                      case 0:
                        _choiceA = 5;
                        _choiceB = 5;
                        break;
                      case 1:
                        _choiceA = 6;
                        _choiceB = 6;
                        break;
                      case 2:
                        _choiceA = 7;
                        _choiceB = 7;
                        break;
                    }
                  });
                },
                isSelected: isSelected2,
              ),

1 个答案:

答案 0 :(得分:0)

好吧,我相信这就是您想要的东西,我想解释一些事情,因为我最终不得不比您的问题多做点更改,因为一旦我有了想要的逻辑,其他问题就会出现是代码。 也对您可以将其取出的额外样式感到抱歉。

 int outputTeamA = 0;
  int outputTeamB = 0;
  List<bool> isSelected1 = [false, false];
  List<bool> isSelected2 = [false, false, false];
  int _choiceA = 0;
  int _choiceB = 0;

  void scoreTeamA() {
    setState(() {
      outputTeamA += _choiceA;
    });
  }

  void scoreTeamB() {
    setState(() {
      outputTeamB += _choiceB;
    });
  }

  @override
  Widget build(BuildContext context) {
    ToggleButtons toggleButtons = ToggleButtons(
      borderRadius: BorderRadius.circular(30),
      borderColor: Colors.pink,
      children: [
        Container(
          padding: EdgeInsets.all(8.0),
          child: Text(
            'Team A',
            textScaleFactor: 3,
          ),
        ),
        Text(
          'Team B ',
          textScaleFactor: 3,
        ),
      ],
      onPressed: (int index) {
        setState(
          () {
            for (int buttonIndex = 0;
                buttonIndex < isSelected1.length;
                buttonIndex++) {
              if (buttonIndex == index) {
                isSelected1[buttonIndex] = true;
              } else {
                isSelected1[buttonIndex] = false;
              }
            }
          },
        );
      },
      isSelected: isSelected1,
    );
    return Scaffold(
      body: SafeArea(
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            toggleButtons,
            SizedBox(height: 20),
            ToggleButtons(
              borderColor: Colors.pink,
              borderRadius: BorderRadius.circular(30),
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('5 points'),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('6 points'),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('7 points'),
                ),
              ],
              onPressed: (int index) {
                setState(() {
                  isSelected2[index] = !isSelected2[index];
                  switch (index) {
                 //This is the other area I had to make changes
                    case 0:
                      if (isSelected2[index]) {
                        print('true');
                        _choiceA += 5;
                        _choiceB += 5;
                      } else {
                        print('false');
                        _choiceA += -5;
                        _choiceB += -5;
                      }
                      break;
                    case 1:
                      if (isSelected2[index]) {
                        _choiceA += 6;
                        _choiceB += 6;
                      } else {
                        _choiceA += -6;
                        _choiceB += -6;
                      }
                      break;
                    case 2:
                      if (isSelected2[index]) {
                        _choiceA += 7;
                        _choiceB += 7;
                        break;
                      } else {
                        _choiceA += -7;
                        _choiceB += -7;
                        break;
                      }
                  }
                });
              },
              isSelected: isSelected2,
            ),
            SizedBox(height: 20),
            MaterialButton(
              shape: CircleBorder(
                  side: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid)),
              color: Colors.blue,
              onPressed: () {
              //This is the logic you wanted
                if (isSelected1[0]) {
                  setState(() {
                    scoreTeamA();
                  });
                } else if (isSelected1[1]) {
                  setState(() {
                    scoreTeamB();
                  });
                }

                print('TeamA: $outputTeamA');
                print('TeamB: $outputTeamB');
              },
              child: Text(
                'win',
                textScaleFactor: 3,
              ),
            ),
          ],
        )),
      ),
    );
  }

一旦添加了您想要的逻辑,我就会注意到,如果用户选择并取消选择一个分数,然后按“我赢了”,则该应用程序的行为就像仍然选择了该分数一样,这就是为什么我现在进行其他更改的原因我不知道您是否要一次选择一个以上的分数,这就是您如何设置逻辑,这就是我走的路。如果这不是您希望的工作方式,那么切换这些逻辑就不那么困难了。因此,总而言之,如果选择了多个分数,它们将被加在一起。