使用 Flutter 的 onTap 可重用自定义小部件？

Question

我现在在做一个flutter项目，第一次做flutter。

我有一个名为 "card_city.dart" 的可重用自定义小部件，并将其用于其他名为 "city.dart"的小部件 使用此代码：

CardCity('Manila', 'assets/images/manila.jpg', Get.to(() => const Manila());)

无论如何，我正在使用 GetX 页面路由代码：Get.to(() => const Manila());

我收到这个错误：

Arguments of a constant creation must be constant expressions. Try making the argument a valid constant, or use 'new' to call the constructor.

A value of type 'Null' can't be assigned to a parameter of type 'void Function()' in a const constructor. Try using a subtype, or removing the keyword 'const'.

Expected to find ')'.

card_city.dart:

import 'package:flutter/material.dart';
import 'package:sample/component/colors.dart';
import 'package:sample/component/styles.dart';

class CardCity extends StatelessWidget {
  final String _cityTitle;
  final String _cityAssetImage;
  final VoidCallback _onTap;

  const CardCity(this._cityTitle, this._cityAssetImage, this._onTap, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 150.0,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(_cityAssetImage),
            fit: BoxFit.cover,
            colorFilter:
                const ColorFilter.mode(Color(0x400B7A77), BlendMode.srcOver),
          ),
          borderRadius: BorderRadius.circular(15)),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () {
            _onTap;
          },
          borderRadius: BorderRadius.circular(15.0),
          splashColor: BrandColor.color.transNeon,
          child: Center(
            child: Text(
              _cityTitle.toUpperCase(),
              style: mainTitleBarabaraWhite,
            ),
          ),
        ),
      ),
    );
  }
}

固定：

card_city.dart:

import 'package:flutter/material.dart';
import 'package:sample/component/colors.dart';
import 'package:sample/component/styles.dart';

class CardCity extends StatelessWidget {
  final String _cityTitle;
  final String _cityAssetImage;
  final VoidCallback _onTap;

  const CardCity(this._cityTitle, this._cityAssetImage, this._onTap, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 150.0,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(_cityAssetImage),
            fit: BoxFit.cover,
            colorFilter:
                const ColorFilter.mode(Color(0x400B7A77), BlendMode.srcOver),
          ),
          borderRadius: BorderRadius.circular(15)),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: _onTap;,
          borderRadius: BorderRadius.circular(15.0),
          splashColor: BrandColor.color.transNeon,
          child: Center(
            child: Text(
              _cityTitle.toUpperCase(),
              style: mainTitleBarabaraWhite,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

试试这个方法

CardCity(
     'Manila', 
      'assets/images/manila.jpg',
     (){ 
        Get.to(() => const Manila());
      })

并在 CardCity 上更改 InkWell 点击赞

child: InkWell(
          onTap: () {
            _onTap();
          },

或

child: InkWell(onTap: _onTap,..

此外，在这种情况下，我更喜欢命名构造函数。

使用 Flutter 的 onTap 可重用自定义小部件？

Reusable Custom Widget with onTap using Flutter?

flutter

flutter-dependencies

flutter-layout