如何在颤动的降价中添加超链接到文本

Posted 2023-02-23

【中文标题】如何在颤动的降价中添加超链接到文本

【英文标题】：How to add hyperlink to text in a markdown in flutter

【发布时间】：2020-07-04 09:23:24

【问题描述】：

我想在屏幕底部添加一个超链接，用于读取 Markdown 小部件。 我试图在 markdown 文件中包含超链接，但 Flutter 没有启动它。

然后我尝试了这个：

Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Protective measures'),
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            child: FutureBuilder(
              future: DefaultAssetBundle.of(context)
                  .loadString("assets/docs/protective_measures.md"),
              builder:
                  (BuildContext context, AsyncSnapshot<String> snapshot) 
                if (snapshot.hasData) 
                  return Markdown(
                    data: snapshot.data,
                    styleSheet: MarkdownStyleSheet(
                      textAlign: WrapAlignment.start,
                      p: TextStyle(
                        fontSize: 16,
                        color: isDark ? Colors.white : Colors.black,
                      ),
                      h2: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        color: isDark ? Colors.white : Colors.black,
                      ),
                      h1: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 25,
                        color: isDark ? Colors.white : Colors.black,
                      ),
                    ),
                  );
                

                return Center(
                  child: CircularProgressIndicator(),
                );
              ,
            ),
          ),
          InkWell(
            child: Text(
              'My Hyperlink',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
                color: Colors.blue,
                decoration: TextDecoration.underline
              ),
            ),
            onTap: () => launch('https://***.com'),
          ),
        ],
      ),
    );
  

结果并不是我想要的。我想要屏幕底部的超文本，就在 Markdown 之后。我也尝试使用 ListView 而不是 Column 但它不起作用。

有什么提示吗？

【问题讨论】：

如何为网页上的链接设置手形光标？

【参考方案1】：

对于插件flutter_markdown，你可以这样做

import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:url_launcher/url_launcher.dart';

final String _markdownData = "-This is [Google link](https://www.google.com)";

// view
MarkdownBody(
    data: _markdownData,
    onTapLink: (text, url, title)
        launch(url);
    ,
)

更新 Flutter_markdown 0.5.1 或更低版本：

MarkdownBody(
    data: _markdownData,
    onTapLink: (url) 
        launch(url);
    ,
)

【讨论】：

添加语法更新以配合当前版本的flutter_markdown

至少从flutter_markdown 0.5.2开始，TapLinkCallback返回3个参数，所以你需要做onTapLink: (text, url, title) => launch(url),

谢谢，如果您知道，请指导如何使用#someid 链接滚动到同一页面

对于上一个颤振/飞镖版本，启动函数不接受空参数。使用：launch(url!)

【参考方案2】：

我明白了。 Markdown() 小部件有一个 onTapLink 方法，我只需要这样做：

onTapLink(url)
  launch(url);