如何在Flutter中实现如图所示的带输入键盘的功能界面？

核心思路是利用TextEditingController共享输入状态，实现多个输入区域的内容同步。以下是两种常见实现方式：

方式一：双TextField绑定同一控制器（顶部为只读输入框） #

这种方式适合顶部区域需要保持输入框样式但不可编辑的场景：

import 'package:flutter/material.dart';

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

  @override
  State<SyncInputScreen> createState() => _SyncInputScreenState();
}

class _SyncInputScreenState extends State<SyncInputScreen> {
  final TextEditingController _sharedController = TextEditingController();

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    _sharedController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 40),
        child: Column(
          children: [
            // 顶部方形只读输入框
            TextField(
              controller: _sharedController,
              readOnly: true,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: "输入内容将同步显示在这里",
              ),
              maxLines: 4,
              style: const TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 30),
            // 底部可编辑输入框（键盘输入源）
            TextField(
              controller: _sharedController,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: "请输入内容",
              ),
              maxLines: 2,
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  }
}

方式二：顶部为纯文本容器+监听控制器变化 #

如果顶部仅需展示文本而非输入框样式，可通过监听控制器文本变化来更新UI：

import 'package:flutter/material.dart';

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

  @override
  State<SyncTextScreen> createState() => _SyncTextScreenState();
}

class _SyncTextScreenState extends State<SyncTextScreen> {
  final TextEditingController _inputController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 监听文本变化，触发UI更新
    _inputController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    _inputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 40),
        child: Column(
          children: [
            // 顶部方形文本展示容器
            Container(
              padding: const EdgeInsets.all(12),
              width: double.infinity,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey.shade300),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                _inputController.text.isEmpty ? "输入内容将同步显示在这里" : _inputController.text,
                style: const TextStyle(fontSize: 18),
              ),
            ),
            const SizedBox(height: 30),
            // 底部输入框
            TextField(
              controller: _inputController,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: "请输入内容",
              ),
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• TextEditingController是同步核心：它管理输入文本的状态，所有绑定该控制器的组件都会自动同步内容。
• 内存管理：务必在组件销毁时调用dispose()方法销毁控制器，避免内存泄漏。
• 自定义样式：可根据需求修改InputDecoration或BoxDecoration来匹配Figma中的界面设计。

内容的提问来源于stack exchange，提问作者Mr.Robot