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

3 回答

• 2

  如果你想让它看起来更像链接，你可以添加下划线：

  new Text("Hello Flutter!", style: new TextStyle(color: Colors.blue, decoration: TextDecoration.underline),)
  

  结果：

  回复于 2024-04-23T15:44:31+08:00
• 8

  只需在Text小部件周围包装InkWell，并将UrlLauncher（从服务库）提供给onTap属性：

  import 'package:flutter/material.dart';
  import 'package:flutter/services.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: () => UrlLauncher.launch(
                    'https://docs.flutter.io/flutter/services/UrlLauncher-class.html')),
          ),
        ),
      );
    }
  }
  

  您可以为“文本”窗口小部件提供样式，使其看起来像链接 .

  更新

  在仔细研究这个问题之后，我找到了一个不同的解决方案来实现你要求的'in line'超链接 . 您可以使用带有TextSpans的RichText Widget .

  import 'package:flutter/material.dart';
  import 'package:flutter/services.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 = () {
                        UrlLauncher.launch(
                            'https://docs.flutter.io/flutter/services/UrlLauncher-class.html');
                      },
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    }
  }
  

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

  回复于 2024-04-23T15:44:31+08:00
• 13

  Flutter没有't have built-in hyperlink support but you can fake it yourself. There'是Gallery's drawer.dart中的一个例子 .

  回复于 2024-04-23T15:44:31+08:00