Flutter中如何通过Riverpod实现TextField内容存入ListView？

你的代码存在几个关键问题，导致输入内容无法正确同步到ListView：

• 全局myList是普通List，没有状态监听机制，更新后UI不会自动刷新
• 单独维护_lengthProvider同步列表长度，不仅冗余，还容易出现内容与长度不一致的情况
• onSubmitted内部重新定义了myList变量，覆盖了全局列表，导致实际未往目标列表添加数据

以下是修正后的完整代码，直接用StateProvider<List<String>>管理列表状态，实现输入内容处理后同步到ListView：

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

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(child: Ana1()),
        ),
      ),
    );
  }
}

// 用StateProvider直接管理列表状态，初始为空列表
final itemsProvider = StateProvider<List<String>>((ref) => []);

class Ana1 extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听列表状态变化，自动触发UI刷新
    final items = ref.watch(itemsProvider);

    return SizedBox(
      width: 1000,
      height: 1000,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 500,
            child: TextField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Content Text',
              ),
              onSubmitted: (inText) {
                // 保留原文本处理逻辑
                String gir = inText;
                String myText = "$gir a";
                List<String> processedList = [];

                for (int a = 0; a < myText.length; a++) {
                  if (myText.substring(a, a + 1) == " ") {
                    processedList.add(myText.substring(0, a));
                    myText = myText.substring(a + 1);
                    a = 0;
                  }
                }

                const String errorText = "?.; :-";
                for (int b = 0; b < processedList.length; b++) {
                  String checkF = processedList[b].substring(0, 1);
                  if (errorText.contains(checkF)) {
                    processedList[b] = processedList[b].substring(1);
                  }

                  String checkL = processedList[b].substring(processedList[b].length - 1);
                  if (errorText.contains(checkL)) {
                    processedList[b] = processedList[b].substring(0, processedList[b].length - 1);
                  }
                }

                // 创建新列表更新状态（Riverpod要求不可变更新）
                final newItems = [
                  ...items,
                  "$inText-${processedList.length + 1}"
                ];
                ref.read(itemsProvider.notifier).state = newItems;
              },
            ),
          ),
          Container(
            color: Colors.amberAccent,
            width: 500,
            child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (BuildContext context, int index) {
                return Text(items[index]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键改动说明 #

• 列表状态管理：用StateProvider<List<String>>替代全局普通List，Riverpod会监听状态变化，自动刷新UI
• 不可变更新：更新列表时创建新实例（通过...items展开旧列表并添加新元素），确保状态变化能被正确检测
• 移除冗余Provider：直接通过items.length获取列表长度，不再需要单独维护长度Provider
• 变量规范修正：将ana1改为符合Dart命名规范的Ana1，避免局部变量覆盖全局变量的问题

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