Flutter Markdown选择区域插件flutter_markdown_selectionarea的使用

Flutter Markdown选择区域插件flutter_markdown_selectionarea的使用

flutter_markdown_selectionarea 是 flutter_markdown 包的一个分支，添加了对SelectionArea的支持。这使得用户能够在Markdown文本中进行文本选择。

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_markdown_selectionarea: any

然后运行pub get来安装包。

开始使用

使用Markdown小部件很简单，只需将包含Markdown格式语法的字符串传递给它即可：

Markdown(data: markdownSource);

如果你不希望有填充或滚动行为，可以使用MarkdownBody小部件：

MarkdownBody(data: markdownSource);

默认情况下，Markdown 使用当前Material Design主题的样式，但也可以创建自己的自定义样式。使用MarkdownStyle类传递自己的样式。如果不打算在Material Design之外使用Markdown，则可以使用MarkdownRaw类。

示例代码

下面是一个简单的示例，展示了如何在Flutter应用中使用flutter_markdown_selectionarea。

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter_markdown_selectionarea/flutter_markdown.dart';

const String _markdownData = """
# 极简Markdown测试
---
这是一个简单的Markdown测试。将包含Markdown标签的文本字符串传递给Markdown小部件，它将以可滚动的小部件形式显示格式化输出。

## 第一部分
Maecenas eget **弧度出格**，mollis ex vitae, posuere magna. Nunc eget
aliquam tortor. Vestibulum porta sodales efficitur. Mauris interdum turpis
eget est condimentum, vitae porttitor diam ornare。

### 子部分A
Sed et massa finibus, blandit massa vel, vulputate velit。Vestibulum vitae
venenatis libero。**__Curabitur sem lectus, feugiat eu justo in, eleifend
accumsan ante。** Sed a fermentum elit。Curabitur sodales metus id mi
ornare, in ullamcorper magna congue。
""";

void main() {
  runApp(
    MaterialApp(
      title: "Markdown Demo",
      home: Scaffold(
        appBar: AppBar(
          title: const Text('极简Markdown Demo'),
        ),
        body: SafeArea(
          child: Markdown(
            data: _markdownData,
          ),
        ),
      ),
    ),
  );
}

更多关于Flutter Markdown选择区域插件flutter_markdown_selectionarea的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Markdown选择区域插件flutter_markdown_selectionarea的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_markdown_selectionarea 是一个用于在 Flutter 应用中渲染 Markdown 文本并支持选择区域的插件。它基于 flutter_markdown 包，并增加了对文本选择区域的支持，允许用户在 Markdown 文本中进行文本选择。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_markdown_selectionarea 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_markdown_selectionarea: ^0.1.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

使用 MarkdownSelectionArea 组件来渲染 Markdown 文本并支持选择区域。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_markdown_selectionarea/flutter_markdown_selectionarea.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Markdown Selection Area Example'),
        ),
        body: MarkdownSelectionArea(
          data: '''
# Hello, World!

This is a **Markdown** text with _selection_ support.

- Item 1
- Item 2
- Item 3

```dart
void main() {
  print("Hello, Flutter!");
}

      ''',
    ),
  ),
);

} }


### 参数说明

`MarkdownSelectionArea` 组件的主要参数包括：

- `data`: 要渲染的 Markdown 文本。
- `styleSheet`: 自定义 Markdown 样式表。
- `onTapLink`: 当用户点击链接时的回调。
- `imageDirectory`: 图片的目录路径。
- `selectableTextKey`: 用于选择文本的键。

### 自定义样式

你可以通过 `styleSheet` 参数来自定义 Markdown 的样式。例如：

```dart
MarkdownSelectionArea(
  data: '''
# Custom Style

This text has a custom style.
  ''',
  styleSheet: MarkdownStyleSheet(
    h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
    p: TextStyle(fontSize: 16, color: Colors.black87),
  ),
);

处理链接点击

你可以在 onTapLink 回调中处理用户点击链接的事件：

MarkdownSelectionArea(
  data: '''
[Visit Flutter](https://flutter.dev)
  ''',
  onTapLink: (text, href, title) {
    print('Link tapped: $href');
    // 你可以在这里处理链接点击事件，例如打开浏览器
  },
);
回到顶部