Flutter：将文本作为链接打开答案

【问题标题】：Flutter: Open the text as a linkFlutter：将文本作为链接打开
【发布时间】：2021-03-15 17:11:15
【问题描述】：

我正在学习如何使用 dart。我创建了一个简单的应用程序来扫描二维码并显示文本。我的问题是： 如何将文本作为链接打开？由于 url 以文本形式显示给我。

目前该应用程序可以正常运行，但我想创建一个点击以在浏览器中打开链接。这是我的 main.dart

 void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _MyAppState();
  }

  class _MyAppState extends State<MyApp> {
  GlobalKey qrKey =GlobalKey();
  var qrText = "";
  QRViewController controller;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(body: Column(children: [

      Expanded(
      flex:5,
      child: QRView(key: qrKey,
      overlay: QrScannerOverlayShape(
        borderRadius:10,
        borderColor: Colors.red,
        borderLength: 30,
        borderWidth: 10,
        cutOutSize:300

      ),
      onQRViewCreated: _onQRViewCreate,)
          ),
    Expanded(
    flex: 1,
    child: Center(
    child: Text('Scan result: $qrText'),



     ),
    )
       ],
      ),
    );
  }

  @override
    void dispose() {
    controller?.dispose();
    super.dispose();
  }



  void _onQRViewCreate(QRViewController controller ) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData;
      });
    });
  }

}

【问题讨论】：

这是 Flutter 移动端还是网页端？
@SethKitchen Mobile.
您想在 WebView 或默认浏览器中打开它？
默认浏览器。不过后面我会尝试在webview中实现。

标签： flutter

【解决方案1】：

使用url_launcher打开链接

例如代码

class _MyAppState extends State<MyApp> {
  GlobalKey qrKey = GlobalKey();
  var qrText = "";
  QRViewController controller;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              flex: 5,
              child: QRView(
                key: qrKey,
                overlay: QrScannerOverlayShape(
                    borderRadius: 10,
                    borderColor: Colors.red,
                    borderLength: 30,
                    borderWidth: 10,
                    cutOutSize: 300),
                onQRViewCreated: _onQRViewCreate,
              )),
          Expanded(
            flex: 1,
            child: Center(
              child: InkWell(
                child: Text(
                  'Scan result: $qrText',
                ),
                onTap: () {
                  if (qrText.isNotEmpty) {
                    launch(qrText);
                  }
                },
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  void _onQRViewCreate(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData;
      });
    });
  }
}

【讨论】：

有没有办法在qrText被捕获时添加振动？

【解决方案2】：

您应该将文本拆分为一行中的两个 TextComponent，并添加一个 GestureDetector 来处理链接上的点击。如果您希望它看起来像一个链接，请添加蓝色样式和下划线。

Row(children:[Text('Scan result: '), GestureDetector(onPressed: () async { await launch(qrText); }, child:Text(qrText, style=...))])

这里解释了“启动”：How do I open a web browser (URL) from my Flutter code?

【讨论】：