Flutter：如何通过TextField实现PDF页码跳转与同步显示？

我已经帮你梳理了现有代码的问题，并整理出完整的双向联动实现方案，核心是打通主页面ListView和底部PageEntry组件的状态同步：

需求回顾 #

你已经完成了基础功能：

• 将62页PDF加载到ListView实现滚动浏览
• 在底部工具栏添加了带TextField的PageEntry页码输入组件

需要实现两个联动功能：

1. 在TextField输入1-62范围内的页码时，ListView自动滚动到对应页面
2. 滚动ListView切换页面时，TextField自动更新显示当前页码

现有代码问题分析 #

目前代码的核心问题是两个组件的状态完全孤立：

• 主页面的滚动状态无法传递给PageEntry
• PageEntry的输入事件无法通知主页面执行滚动操作
• 缺少页码范围校验和状态同步机制

完整解决方案 #

我们通过回调函数+状态引用的方式实现双向联动，分三步完成：

步骤1：改造PageEntry组件，支持状态同步和回调 #

首先给PageEntry添加初始页码参数和页码变更回调，同时提供外部更新输入框的方法：

import 'package:flutter/services.dart'; // 导入输入格式化工具

class PageEntry extends StatefulWidget {
  final Color foregroundColor;
  final Color backgroundColor;
  final double height;
  final double width;
  final bool isVisible;
  // 新增：初始页码（1-based）
  final int initialPage;
  // 新增：页码提交回调，通知主页面跳转
  final Function(int) onPageSubmitted;

  PageEntry({
    this.height = 24,
    this.width = 35,
    this.isVisible = true,
    this.backgroundColor = const Color(0xFFFFFFFF),
    this.foregroundColor,
    required this.initialPage,
    required this.onPageSubmitted,
  });

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

class _PageEntryState extends State<PageEntry> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    // 用初始页码初始化输入框
    _controller = TextEditingController(text: widget.initialPage.toString());
  }

  // 处理用户提交页码，做范围校验
  void _handleSubmit(String value) {
    int? pageNumber = int.tryParse(value);
    if (pageNumber != null && pageNumber >=1 && pageNumber <=62) {
      widget.onPageSubmitted(pageNumber);
    } else {
      // 输入无效，恢复当前页码
      _controller.text = widget.initialPage.toString();
    }
  }

  // 提供外部更新输入框的方法
  void updateCurrentPage(int page) {
    if (_controller.text != page.toString()) {
      _controller.text = page.toString();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    if (!widget.isVisible) return Container();
    
    return Container(
      height: widget.height,
      width: widget.width,
      color: widget.backgroundColor,
      foregroundDecoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
      ),
      child: TextField(
        keyboardType: TextInputType.number,
        textAlign: TextAlign.center,
        controller: _controller,
        onSubmitted: _handleSubmit,
        // 限制输入为数字且长度不超过2
        inputFormatters: [
          FilteringTextInputFormatter.digitsOnly,
          LengthLimitingTextInputFormatter(2),
        ],
      ),
    );
  }
}

步骤2：改造主页面，实现滚动监听和页码跳转 #

在主页面中添加滚动监听，实时更新当前页码，并同步到PageEntry；同时处理PageEntry的跳转回调：

class MyApp extends StatefulWidget {
  String? _pdfPath;
  int currentPage = 1;
  final ScrollController controller = ScrollController(); // 修正命名规范

  set pdfPath(String path) { // 修正命名规范
    if (path != _pdfPath) {
      _pdfPath = path;
    }
  }

  @override
  _NativePdfState createState() => _NativePdfState(_pdfPath, currentPage);
}

class _NativePdfState extends State<MyApp> {
  String? _pdfPath;
  int _currentPage = 1;
  // 用GlobalKey获取PageEntry的状态引用
  final GlobalKey<_PageEntryState> _pageEntryKey = GlobalKey();

  _NativePdfState(String? pdfPath, int currentPage) {
    _pdfPath = pdfPath;
    _currentPage = currentPage;
  }

  @override
  void initState() {
    super.initState();
    // 添加滚动监听，实时更新当前页码
    widget.controller.addListener(_onScroll);
  }

  // 滚动时计算当前页码并同步到PageEntry
  void _onScroll() {
    if (!widget.controller.hasClients) return;
    
    final totalPages = 62;
    final maxScroll = widget.controller.position.maxScrollExtent;
    if (maxScroll == 0) return;

    // 计算当前页码（0-based转1-based）
    final currentItem = (widget.controller.offset / maxScroll * totalPages).floor();
    final newPage = currentItem + 1;

    if (newPage != _currentPage) {
      setState(() => _currentPage = newPage);
      // 更新PageEntry输入框
      _pageEntryKey.currentState?.updateCurrentPage(_currentPage);
    }
  }

  // 处理PageEntry的跳转请求，滚动到指定页码
  void _jumpToTargetPage(int page) {
    if (!widget.controller.hasClients) return;
    
    final totalPages = 62;
    final maxScroll = widget.controller.position.maxScrollExtent;
    // 计算目标滚动偏移量
    final targetOffset = maxScroll * (page - 1) / totalPages;
    
    setState(() => _currentPage = page);
    widget.controller.jumpTo(targetOffset);
  }

  @override
  void dispose() {
    widget.controller.removeListener(_onScroll);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Expanded(
        child: FutureBuilder(
          future: Pdfviewerplugin.getImages(_pdfPath),
          builder: (context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              final listLength = (snapshot.data as List).length;
              return ScrollBar(
                currentPage: (_) => _currentPage, // 直接返回当前页码
                controller: widget.controller,
                child: ListView.builder(
                  controller: widget.controller,
                  itemCount: listLength,
                  itemBuilder: (context, index) {
                    return Center(
                      child: Container(
                        margin: index == listLength-1 
                            ? EdgeInsets.zero 
                            : EdgeInsets.fromLTRB(0,0,0,5),
                        child: snapshot.data[index],
                      ),
                    );
                  },
                ),
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
      Expanded(
        flex: 0,
        // 假设BottomToolbar包含PageEntry，这里直接传入配置
        child: BottomToolbar(
          pageEntry: PageEntry(
            key: _pageEntryKey, // 绑定GlobalKey
            initialPage: _currentPage,
            onPageSubmitted: _jumpToTargetPage,
          ),
        ),
      ),
    ]);
  }
}

步骤3：调整BottomToolbar（如果需要） #

如果你的BottomToolbar是自定义组件，只需确保PageEntry被正确挂载即可，不需要额外复杂逻辑：

class BottomToolbar extends StatelessWidget {
  final PageEntry pageEntry;

  const BottomToolbar({required this.pageEntry});

  @override
  Widget build(BuildContext context) {
    return Container(
      // 你的底部工具栏布局
      child: pageEntry,
    );
  }
}

关键细节说明 #

1. 页码转换：ListView的索引是0-based，而我们的页码是1-based，注意转换时的+1和-1操作
2. 滚动偏移计算：通过(页码-1)/总页数 * 最大滚动范围确保滚动到准确位置
3. 输入校验：限制输入为数字且长度不超过2，同时校验页码范围，避免无效操作
4. 状态同步：用GlobalKey直接获取PageEntry的状态，实现高效的状态更新

内容的提问来源于stack exchange，提问作者Sarath Kumar