Flutter：将文本作为链接打开

Posted 2023-02-23

【中文标题】Flutter：将文本作为链接打开

【英文标题】：Flutter: Open the text as a link

【发布时间】：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中实现。

【参考方案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?