在颤动中使用手势检测器点击容器时更改容器颜色答案

【问题标题】：Changing a container color when container is tapped using gesturedetector in flutter在颤动中使用手势检测器点击容器时更改容器颜色
【发布时间】：2021-12-31 00:58:27
【问题描述】：

你好，我一直在这里试图找出做错了什么，男性和女性可重复使用的卡片在点击时会改变颜色，但是在我的卡片类中放置 GestureDetector 后它停止工作。点击后颜色拒绝改变，请看下面的代码。

import 'package:bmi_calculator/card_icon.dart';
import 'package:bmi_calculator/cards.dart';
import 'package:flutter/material.dart';

Color activeCardColor = const Color(0XFF1D1E33);
Color inactiveCardColor = const Color(0XFF111328);
Color buttomContainerColor = const Color(0xffeb1555);
const double buttomContainerHeight = 70.0;

enum Gender {
  male,
  female,
}

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

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

class _InputPageState extends State<InputPage> {
  Gender? selectedGender;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(
                      ontapped: () {
                        setState(() {
                          selectedGender = Gender.male;
                        });
                      },
                      colour: selectedGender == Gender.male
                          ? activeCardColor
                          : inactiveCardColor,
                      cardChild: const CardIcon(Icons.male, 'Male'),
                    ),
                  ),
                  Expanded(
                    child: ReuseableCard(
                      ontapped: () {
                        setState(() {
                          selectedGender = Gender.female;
                        });
                      },
                      colour: selectedGender == Gender.female
                          ? activeCardColor
                          : inactiveCardColor,
                      cardChild: const CardIcon(Icons.male, 'Female'),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: ReuseableCard(
                colour: activeCardColor,
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(
                      colour: activeCardColor,
                    ),
                  ),
                  Expanded(
                    child: ReuseableCard(
                      colour: activeCardColor,
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10.0),
              color: buttomContainerColor,
              height: buttomContainerHeight,
              width: double.infinity,
            )
          ],
        ));
  }
}

这是我的卡片类

import 'package:flutter/material.dart';

class ReuseableCard extends StatelessWidget {
  final Color? colour;
  final Widget? cardChild;
  final void Function()? ontapped;

  const ReuseableCard({this.colour, this.cardChild, this.ontapped});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        ontapped;
        print('Button Pressed');
      },
      child: Container(
        child: cardChild,
        margin: const EdgeInsets.all(10),
        width: double.infinity,
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

【问题讨论】：

更改 => onTap: () { ontapped; print('按钮按下'); }, to=> onTap:ontapped

标签： android flutter dart

【解决方案1】：

在函数调用中添加括号

onTap: () {
    ontapped(); // here
    print('Button Pressed');
  },

【讨论】：

【解决方案2】：

问题在于传递ontapped 函数。当您简单地放置 ontapped 而没有 Parenthesis () 时，将不会调用该函数，因此您需要通过以下方式更改它。使用 Lambda 函数时，您可以选择传递函数

适用于多种功能

onTap: () {
    ontapped(); // here
  },

单一功能

onTap: ontapped, // here

【讨论】：