Блог

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

Что мне нужно, так это просто мужская карточка (мой пользовательский виджет под названием ReusableCard).

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

Я делюсь своим кодом здесь. В этом коде я еще не использовал GestureDetector.

 class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
            child: Text('BMI Calculator')
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
 

                 ReusableCard(activeCardColor,
                    IconContents(FontAwesomeIcons.mars, 'MALE')),
                ReusableCard(activeCardColor,
                    IconContents(FontAwesomeIcons.venus, 'FEMALE')),
 

               ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                ReusableCard(activeCardColor),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                ReusableCard(activeCardColor),
                ReusableCard(activeCardColor),
              ],
            ),
          ),
          Container(
            color: bottomContainerColor,
            width: double.infinity,
            margin: EdgeInsets.only(top: 10),
            height: bottomContainerHeight,
          ),
        ],
      ),
    );
  }
}
 

Настоящая мясистая часть кода заключается в блокчейнах. Мясистая часть после добавления GestureDetector в МУЖСКУЮ многоразовую карточку.

         GestureDetector(
          child: ReusableCard(activeCardColor,
              IconContents(FontAwesomeIcons.mars, 'MALE')),
        ),
        ReusableCard(activeCardColor,
            IconContents(FontAwesomeIcons.venus, 'FEMALE')),
 

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

 class ReusableCard extends StatelessWidget {
  ReusableCard(this.colour, [this.cardChild]);

  final Color colour;
  final Widget cardChild;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }
}
 

Я проверил документацию и, кажется, все делаю правильно. Из этого я могу сделать вывод, что я где-то напутал с расширенным виджетом, но не могу его исправить. Любая помощь ценится людьми.

Я бы предложил добавить GestureDetector внутри вас ReusableCard , как вашего ребенка Expanded .

 class ReusableCard extends StatelessWidget {
  ReusableCard(
    this.colour, {
    required this.cardChild,
    required this.onTap,
  });

  final Color colour;
  final Widget cardChild;
  final VoidCallback onTap;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
          onTap: onTap,
          child: Container(
            child: cardChild,
            margin: EdgeInsets.all(15),
            decoration: BoxDecoration(
              color: colour,
              borderRadius: BorderRadius.circular(10),
            ),
          )),
    );
  }
}
 

Таким образом, вам не нужно будет оборачивать свой ReusableCard GestureDetector виджет с Expanded разрывом.