flutter - 如何在 Flutter 小部件中创建超链接？

Question

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

超链接应该嵌入到 Text 中。或类似的 TextView ，例如:

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

有什么提示吗？

Answer 1

只需将 InkWell 包裹在 Text 小部件周围，然后将 UrlLauncher(来自服务库)提供给 onTap 属性。安装UrlLauncher在下面使用之前作为一个 Flutter 包。

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('UrlLauncher'),
        ),
        body: new Center(
          child: new InkWell(
              child: new Text('Open Browser'),
              onTap: () => launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html')
          ),
        ),
      ),
    );
  }
}

您可以为 Text 小部件提供一种样式，使其看起来像一个链接。

更新

在稍微研究了这个问题后，我发现了一个不同的解决方案来实现您要求的“在线”超链接。您可以使用 RichText Widget附上 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');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这样您实际上可以突出显示一个单词并从中创建一个超链接；)