【问题标题】:Why does onTap and functions in it does not work in InkWell?为什么 onTap 和其中的函数在 InkWell 中不起作用?
【发布时间】:2021-03-26 19:59:57
【问题描述】:

我试图在点击 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 删除容器,但如果我这样做,它会因为文本边距而毁掉应用程序。也试过 onDoubleTap。

【问题讨论】:

    标签: flutter flutter-layout flutter-web


    【解决方案1】:

    您应该将 RichText 小部件用于可点击的文本,而不是使用 inkwell。下面是相同的代码。使用常规文本和墨水池并不是一个特别好的做法,因为如果您想在其后添加常规文本和链接,您将不得不使用 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 函数中出现错误。

    【讨论】:

    • 我有一个问题,它不打印 点击这里...当我点击它时。
    • 好的,等一下,我会测试你的代码,然后再回复你
    • 我刚查了一下,这是 Flutter 自己提供的小部件的问题。您可以尝试使用此包作为解决方法:pub.dev/packages/clickable_list_wheel_view
    • 好的,我稍后试试。谢谢!
    【解决方案2】:

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

    【讨论】:

    • 尝试用 Material() 包裹它,仍然没有响应
    • 可以添加回答功能码吗?还是删除它并在没有它的情况下测试打印?
    • 已更新。对不起,如果代码有异味,我只是在学习。
    • 别担心,尝试在下面的代码中附加await 使用它
    • 我不明白我应该如何在那里使用 await。它说“等待表达式只能在异步函数中使用。”,因为它是在返回 Scaffold()
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-15
    • 2022-11-15
    • 2012-05-14
    相关资源
    最近更新 更多