如何复制文本而不丢失其在flutter中应用的样式？

Question

演示图片

如此屏幕截图所示，我有多种格式的文本及其应用的字体样式，并且我在列表磁贴中使用每种字体创建了复制文本方法，但是当我复制文本时出现问题，但它给了我纯文本而不是应用的字体设置文本样式，假设您应用了粗体文本，例如“example_text”，但是当您复制并粘贴它时，您将得到纯文本“example_text”而不是应用的样式

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Font Styles Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FontStylesScreen(),
    );
  }
}

class FontStylesScreen extends StatefulWidget {
  const FontStylesScreen({Key? key});

  @override
  _FontStylesScreenState createState() => _FontStylesScreenState();
}

class _FontStylesScreenState extends State<FontStylesScreen> {
  final TextEditingController _textController = TextEditingController();
  List<String> _fontFamilies = [];

  @override
  void initState() {
    super.initState();
    _getAvailableFonts();
  }

  void _getAvailableFonts() {
    final fonts = GoogleFonts.asMap().keys.toList();
    setState(() {
      _fontFamilies = fonts;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Font Styles Example'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _textController,
              decoration: const InputDecoration(
                labelText: 'Enter Text',
                border: OutlineInputBorder(),
              ),
              onChanged: (_) {
                setState(() {});
              },
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _fontFamilies.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    _textController.text,
                    style: GoogleFonts.getFont(_fontFamilies[index], fontSize: 30),
                  ),
                  trailing: IconButton(
                    icon: const Icon(Icons.copy),
                    onPressed: () async {
                      // Convert text to UTF bytes
                      List<int> bytes = utf8.encode(_textController.text);
                      // Set UTF bytes to clipboard
                      Clipboard.setData(ClipboardData(
                        text: utf8.decode(bytes),
                        // Ensure that the clipboard data is in UTF-8 format
                      ));
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('Copied to clipboard'),
                        ),
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

在 Flutter 中，如果您想复制文本及其应用的样式（例如文本颜色、字体大小等），可以使用

SelectableText

小部件。

SelectableText

小部件允许用户选择和复制文本，同时保留其样式。

这是一个简单的例子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Copy Styled Text'),
        ),
        body: Center(
          child: SelectableText(
            'This is styled text',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

在此示例中，

SelectableText

小部件用于显示具有特定样式的文本。然后，用户可以长按文本以调出复制菜单，允许他们复制文本及其样式。

请记住，

SelectableText

小部件在 Flutter 2.5.0 及更高版本中可用。如果您使用的是旧版本的 Flutter，您可能需要升级到新版本才能使用此小部件。

Answer 2

您想将其粘贴到应用程序中，对吧？因为不可能将相同的字体和样式粘贴到应用程序之外。

仅供参考 - 剪贴板不支持字体样式。

这取决于您粘贴的位置。

在 flutter 中 - 您可以复制 JSON 对象 - {"Text":"演示文本", "fontStyle":"Cursue"}.