欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

一、使用软件

DevEco Studio

鸿蒙官方集成开发环境，提供项目管理、代码编辑、模拟器调试、应用打包等全流程开发能力，是 Flutter-OH 应用开发的核心工具。

Flutter-OH SDK

面向 OpenHarmony 生态定制的 Flutter 跨平台开发工具包，支持 Dart 语言编译、鸿蒙平台适配、UI 组件渲染与应用构建。

OpenHarmony 模拟器

DevEco Studio 内置的鸿蒙设备虚拟运行环境，无需物理真机即可完成 APP 界面预览、功能调试与兼容性验证。
 

二、核心内容

实现多行文本编辑、编辑 + 预览双栏布局、字数统计、键盘适配、鸿蒙输入框兼容优化

三、操作步骤

在lib/pages文件夹里新建markdown_edit_page.dart

在markdown_edit_page.dart中添加代码

import 'package:flutter/material.dart';

class MarkdownEditPage extends StatefulWidget {
  const MarkdownEditPage({super.key});

  @override
  State<MarkdownEditPage> createState() => _MarkdownEditPageState();
}

class _MarkdownEditPageState extends State<MarkdownEditPage> {
  final TextEditingController _controller = TextEditingController();
  int _wordCount = 0;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {
        _wordCount = _controller.text.length;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Markdown 编辑器"),
        centerTitle: true,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Center(
              child: Text(
                "字数：$_wordCount",
                style: const TextStyle(fontSize: 14),
              ),
            ),
          ),
        ],
      ),
      body: SafeArea(
        child: Column(
          children: [
            // 编辑区域
            Expanded(
              flex: 1,
              child: Container(
                padding: const EdgeInsets.all(12),
                color: Colors.grey[100],
                child: TextField(
                  controller: _controller,
                  maxLines: null,
                  autofocus: true,
                  decoration: const InputDecoration(
                    hintText: "请输入Markdown内容...\n示例：# 标题\n## 二级标题\n- 列表",
                    border: InputBorder.none,
                  ),
                  keyboardType: TextInputType.multiline,
                  textInputAction: TextInputAction.newline,
                ),
              ),
            ),

            // 分割线
            const Divider(height: 1),

            // 实时预览区域
            Expanded(
              flex: 1,
              child: SingleChildScrollView(
                padding: const EdgeInsets.all(12),
                child: Text(
                  _controller.text.isEmpty ? "预览区域" : _controller.text,
                  style: const TextStyle(fontSize: 16, height: 1.4),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在 main.dart 最上面加这一行

import 'package:note_app/pages/markdown_edit_page.dart';

找到main.dart的悬浮按钮部分

在 onPressed 添加跳转代码

floatingActionButton: FloatingActionButton(
  onPressed: () {
    // 在这里写跳转
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const MarkdownEditPage(),
      ),
    );
  },
  child: const Icon(Icons.add),
),

三、运行验证

运行模拟器，测试编辑、实时预览、字数统计

验证键盘弹出、输入流畅度、鸿蒙平台兼容性

四、小结---Flutter-OH 鸿蒙工具类应用实战 Day3：Note 记事本 Markdown 编辑器页面与文本实时预览

        在现代化工具类应用中，富文本编辑能力是提升产品实用性与专业性的关键。Markdown 作为轻量级标记语言，凭借简洁语法、高效排版、跨平台兼容等优势，成为笔记、文档类应用的标配功能。本篇基于 Flutter-OH 框架，为鸿蒙 Note 记事本应用打造专属 Markdown 编辑器页面，实现文本编辑、实时预览、字数统计、输入体验优化等核心功能，全面贴合 OpenHarmony 平台交互规范。

        编辑器页面采用上下分栏布局，上区域为文本输入编辑区，支持多行输入、自动换行、键盘高度适配；下区域为实时预览区，可将 Markdown 语法即时渲染为标准排版效果，让用户边写边看，大幅提升编辑效率。同时集成字符统计与字数限制功能，实时展示当前输入长度，帮助用户控制内容篇幅，避免无效冗余信息。

        针对 OpenHarmony 平台特性，完成输入框深度适配：优化软键盘弹出与收起逻辑，避免界面被遮挡；修复输入焦点异常、光标错位等平台兼容问题；调整输入框样式、内边距与交互反馈，让操作更贴合鸿蒙原生体验。编辑器支持内容实时同步更新，无需手动刷新，预览区可跟随输入动态变化，实现零延迟渲染。

        功能实现过程中，采用 TextField 组件构建多行编辑区域，通过控制器监听文本变化，结合状态管理实现预览区实时刷新。布局采用 Flutter 原生组件组合，保证轻量化与高性能，无第三方依赖，降低包体积与兼容性风险。页面整体遵循 Material Design 与鸿蒙 UX 双重规范，配色简洁、交互直观，适配手机、平板等多设备屏幕。

        本篇完成的 Markdown 编辑器，不仅为记事本应用增添核心编辑能力，还实现了 Flutter 组件深度运用、布局优化、平台适配等实战技能，为后续文件保存、数据同步、富文本导出等功能奠定基础。通过真机与模拟器双重验证，编辑器运行流畅、输入无卡顿、预览效果准确，完全满足鸿蒙工具类应用的使用需求。