Flutter 如何将带有容器子级的GestureDetector制作成小部件？

我想在GestureDetector中制作一个带有容器的可重复使用按钮，如果我点击它，它将执行一些功能，如果我按住它，它的颜色将变暗。任何帮助、暗示、提示都将不胜感激

我尝试在自定义小部件文件中编写GestureDetector，但它给了我错误

当我试图在GestureDetector上提取小部件时，它给出了一个对封闭类方法的引用，该方法无法提取错误

（主页）

这是我想要的，但在一个自定义小部件中，我可以反复使用它。 正常的-

---

按下-

可以使用提取方法而不是提取小部件。Flatter将按原样添加所有内容，而不是类，您将获得一个可重用的函数

import 'package:flutter/material.dart';
import 'ReusableTwoLineList.dart';
import 'Text_Content.dart';

const mainTextColour = Color(0xFF212121);
const secondaryTextColour = Color(0xFF757575);
const inactiveBackgroundCardColor = Color(0xFFFFFFFF);
const activeBackgroundCardColor = Color(0xFFE5E5E5);

enum CardState {
  active,
  inactive,
}

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  CardState currentCardState = CardState.inactive;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: ListView(
        children: <Widget>[
          GestureDetector(
            onTapDown: (TapDownDetails details) {
              setState(() {
                currentCardState = CardState.active;
              });
            },
            onTapCancel: () {
              setState(() {
                currentCardState = CardState.inactive;
              });
            },
            onTap: () {
              setState(() {
                currentCardState = CardState.inactive;
                //some random function
              });
            },
            child: ReusableTwoLineList(
              mainTextColor: mainTextColour,
              secondaryTextColor: secondaryTextColour,
              backgroundCardColor: currentCardState == CardState.active
                  ? activeBackgroundCardColor
                  : inactiveBackgroundCardColor,
              cardChild: TextContent(
                mainLabel: 'First Day',
                secondaryLabel: 'This is the first day of the week',
              ),
            ),
          ),
          ReusableTwoLineList(
            mainTextColor: mainTextColour,
            secondaryTextColor: secondaryTextColour,
            cardChild: TextContent(
              mainLabel: '2nd day',
              secondaryLabel: 'This is the end day',
            ),
          ),
          ReusableTwoLineList(
            mainTextColor: mainTextColour,
            secondaryTextColor: secondaryTextColour,
          ),
        ],
      ),
    );
  }
}

class ReusableTwoLineList extends StatelessWidget {
  ReusableTwoLineList({
    @required this.mainTextColor,
    @required this.secondaryTextColor,
    this.backgroundCardColor,
    this.cardChild,
    this.onPressed,
  });

  final Color mainTextColor, secondaryTextColor, backgroundCardColor;
  final Widget cardChild;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: backgroundCardColor,
      padding: EdgeInsets.symmetric(horizontal: 16),
      height: 72,
      width: double.infinity,
      child: cardChild,
    );
  }
}