как я могу остановить все кнопки сборки, меняющие свое состояние при нажатии, спасибо - PullRequest
Новая
       0

как я могу остановить все кнопки сборки, меняющие свое состояние при нажатии, спасибо

0 голосов
/ 09 мая 2020

при нажатии кнопки становятся серыми. такое случается, но проблема в том, что при нажатии одной кнопки все кнопки становятся серыми, чего я не хочу. я хочу только по одному. 

var pressed = false;
  Widget BuildButton(
    String buttonText,
  ) {
    MainAxisAlignment.spaceEvenly;
    return new Expanded(
        child: new FlatButton(
            shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(
                  15.0,
                ),
                side: BorderSide(color: Colors.black)),
            color: pressed ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed = !pressed;
              });
            }));

          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [ // buttons start here
                    BuildButton("XXS"),
                    BuildButton("XS"),
                    BuildButton("S"),
                    BuildButton("M"),
                  ]),



                  ]),

Ответы [ 3 ]

0 голосов
/ 09 мая 2020

Вам нужна карта различных «нажатых» состояний для каждой кнопки. 

Map<String, bool> pressed = {};
Widget BuildButton(
String buttonText,
) {
    return new Expanded(
        child: new FlatButton(
            color: pressed['buttonText] == true ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed['buttonText'] = !(pressed['buttonText'] ?? false);
              });
            },
          ),
      );
}
0 голосов
/ 09 мая 2020

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

Я также переместил виджет Expanded из нового виджета BuildButton, чтобы сделать его более пригодным для повторного использования. Виджеты Expanded можно использовать только внутри Row и Column. Теперь вашу кнопку можно использовать где угодно! 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            BuildButton("XXS"),
            BuildButton("XS"),
            BuildButton("S"),
            BuildButton("M"),
          ].map((item) => Expanded(child: item)).toList(),
        ),
      ],
    );
  }
}

class BuildButton extends StatefulWidget {
  final String buttonText;

  const BuildButton(this.buttonText);

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

class _BuildButtonState extends State<BuildButton> {
  bool pressed = false;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () => setState(() => pressed = !pressed),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
        side: BorderSide(color: Colors.black),
      ),
      color: pressed ? Colors.grey : Colors.white, // colour change when clicked
      textColor: Colors.black,
      padding: EdgeInsets.all(6.0),
      child: Text(widget.buttonText),
    );
  }
}

Совет для профессионалов

Используйте конечные запятые, чтобы программа форматирования dart помогала вам сохранять код читабельным.

0 голосов
/ 09 мая 2020

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

Вы можете создать список, содержащий нажатое значение для каждой кнопки . 

List<bool> pressed = [false, false, false, false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildButton("XXS", 0),
                BuildButton("XS", 1),
                BuildButton("S", 2),
                BuildButton("M", 3),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget BuildButton(String buttonText, int index) {
    return new Expanded(
      child: new FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(
              15.0,
            ),
            side: BorderSide(color: Colors.black)),
        color: pressed[index]
            ? Colors.grey
            : Colors.white, // colour change when clicked
        textColor: Colors.black,
        padding: EdgeInsets.all(6.0),
        child: new Text(buttonText),
        onPressed: () {
          setState(() {
            pressed[index] = !pressed[index];
          });
        },
      ),
    );
  }
...