flutter - 如何使用Container子项从GestureDetector制作小部件？

Question

我想在GestureDetector中创建一个带有容器的可重用按钮，如果点击它，它将执行某些功能，如果按住它，其颜色将变暗。任何帮助，提示，技巧将不胜感激。

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

当我尝试在GestureDetector上提取小部件时，它给出了对无法提取的封闭类方法的引用。

(主页)

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,
          ),
        ],
      ),
    );
  }
}

ReusableTwoLineList.dart(我要制作的自定义小部件)

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,
    );
  }
}

这就是我想要的，但是在自定义小部件中，因此我可以反复使用它。
正常 https://i.imgur.com/lVUkMFK.png
按下时- https://i.imgur.com/szuD4ZN.png

Answer 1

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