为什么 onTap 及其中的函数在 InkWell 中不起作用?

时间:2021-03-26 19:59:57

标签: flutter flutter-layout flutter-web

我试图在点击 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),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ))));
  }
}

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

2 个答案:

答案 0 :(得分:0)

InkWell 必须有 Material 父级。将您的 InkWell 包裹在 Material 小部件中。 见InkWell documentation。 此外,如果 launchURL(fixedTest[index]['url']) 是一个异步函数,您必须await 此函数暂停您的应用程序直到完成。

答案 1 :(得分:0)

您应该将 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'),
        )
      ]),
    );

关于您的错误,而不是您的 launchURL 函数,请尝试打印一些内容以了解双击手势是否被识别。如果您在双击时获得打印语句,那么它是您的 launchURL 函数中的一个错误。