为什么onTap及其功能在InkWell中不起作用

Question

当点击ListWheelScrollView时，我试图打开链接，但它不起作用。它甚至没有进入OnTap

import 'package:flutter/material.dart';
import 'package:string_validator/string_validator.dart';
import 'package:url_launcher/url_launcher.dart';
class News extends StatefulWidget {
final Map news;
@override
_NewsState createState() => _NewsState();
const News({Key key, this.news}) : super(key: key);
}
class _NewsState extends State<News> {
Map test;
double textPadding = 290;
// ignore: non_constant_identifier_names
@override
void initState() {
super.initState();
}
launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url, forceWebView: true);
} else {
throw 'Could not launch $url';
}
}
@override
Widget build(BuildContext context) {
test = (ModalRoute.of(context).settings.arguments);
var fixedTest = test['data'].news4today;
checkUrls() {
for (int i = 0; i < fixedTest.length; i++) {
if (fixedTest[i]['urlToImage'] == null ||
!isURL(fixedTest[i]['urlToImage'])) {
fixedTest[i]['urlToImage'] =
'https://i.pinimg.com/originals/8a/eb/d8/8aebd875fbddd22bf3971c3a7159bdc7.png';
}
if (fixedTest[i]['url'] == null || !isURL(fixedTest[i]['url'])) {
fixedTest[i]['url'] = 'https://google.com';
}
}
}
checkUrls();
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Center(child: Text('News')),
backgroundColor: Colors.deepPurpleAccent,
),
body: ListWheelScrollView.useDelegate(
itemExtent: 400,
diameterRatio: 9,
squeeze: 1.2,
physics: BouncingScrollPhysics(),
onSelectedItemChanged: (index) {
// debugPrint(index.toString());
},
childDelegate: ListWheelChildBuilderDelegate(
childCount: 100,
builder: (context, index) => Container(
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Material(
child: InkWell(
onDoubleTap: () {
launchURL(fixedTest[index]['urlToImage']);
},
child: Container(
height: 353.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.scaleDown,
alignment: FractionalOffset.center,
image: NetworkImage(
fixedTest[index]['urlToImage'])),
),
),
),
),
Container(
margin: EdgeInsets.only(top: 285),
child: Padding(
padding: const EdgeInsets.all(10),
child: SizedBox(
child: Text(
fixedTest[index]['title'],
style: TextStyle(fontSize: 16),
maxLines: 4,
textAlign: TextAlign.center,
)),
),
decoration: BoxDecoration(
color: Colors.purple[100],
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.8),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(1, 1),
),
],
),
)
],
),
))));
}
}

我试图删除带墨迹的容器，但如果我这样做，它会因为文本边距而破坏应用程序。也尝试过DoubleTap。

Answer 1

不应该使用inkwell，而应该使用RichText小部件来获取可点击的文本。以下是相同的代码。使用常规文本和墨迹井并不是一个好的做法，特别是因为如果你想在它后面添加一个常规文本和一个链接，你必须使用Row小部件，如果链接到下一行，它看起来就不会像预期的那样。

import 'package:flutter/gestures.dart';

new RichText(
text: new TextSpan(text: 'Non touchable. ', children: [
new TextSpan(
text: 'Tap here.',
recognizer: new TapGestureRecognizer()..onTap = () => print('Tap Here onTap'),
)
]),
);

关于你的错误，试着打印一些东西来知道双击手势是否被识别，而不是启动URL功能。如果双击得到print语句，那么这是launchURL函数中的一个错误。

Answer 2

InkWell必须具有Material父级。将您的InkWell包装在Material小部件中。参见InkWell文档。此外，如果launchURL(fixedTest[index]['url'])是一个异步函数，而您必须使用await，则此函数会暂停您的应用程序，直到完成。