如何在Flutter小部件中创建超链接? [英] How to create a hyperlink in Flutter widget?

问题描述

我想创建一个超链接以显示在我的Flutter应用中.

I would like to create a hyperlink to display in my Flutter app.

超级链接应嵌入在Text或类似的文本视图中，例如:

The hyper link should be embedded in a Text or similar text views like:

The last book bought is <a href='#'>this</a>

有任何提示吗?

推荐答案

只需将InkWell包装在Text小部件周围，并将UrlLauncher(来自服务库)提供给onTap属性.在下面使用它之前，将 UrlLauncher 安装为Flutter软件包.

Just wrap an InkWell around a Text widget and supply an UrlLauncher (from the service library) to the onTap attribute. Install UrlLauncher as a Flutter package before using it below.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';


void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('UrlLauchner'),
        ),
        body: new Center(
          child: new InkWell(
              child: new Text('Open Browser'),
              onTap: () => launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html')
          ),
        ),
      ),
    );
  }
}

您可以为文本"小部件提供样式，以使其看起来像一个链接.

You can supply a style to the Text widget to make it look like a link.

在仔细研究了这个问题之后，我发现了一个不同的解决方案来实现您所要求的行内"超链接.您可以将 RichText小部件与随附的

After looking into the issue a little I found a different solution to implement the 'in line' hyperlinks you asked for. You can use the RichText Widget with enclosed TextSpans.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('UrlLauchner'),
        ),
        body: new Center(
          child: new RichText(
            text: new TextSpan(
              children: [
                new TextSpan(
                  text: 'This is no Link, ',
                  style: new TextStyle(color: Colors.black),
                ),
                new TextSpan(
                  text: 'but this is',
                  style: new TextStyle(color: Colors.blue),
                  recognizer: new TapGestureRecognizer()
                    ..onTap = () { launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

通过这种方式，您实际上可以突出显示一个单词并在其中创建超链接;)

This way you can actually highlight one word and make a hyperlink out of it ;)

这篇关于如何在Flutter小部件中创建超链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！