我不明白如何使用列表修复错误

Question

列表没有足够的空间，似乎我以前这样做过，一切正常，但现在不行。我最近开始在 Flutter 上进行开发，所以我可能遗漏了一些东西，如果你能帮助解决这个错误，我将不胜感激。

home_screen

class HomePage extends StatelessWidget {
  final todoRepository = TodoRepository();

  @override
  Widget build(BuildContext context) {
    // final TodoBloc todoBloc = context.read<TodoBloc>();
    return BlocProvider<TodoBloc>(
      create: (context) => TodoBloc(todoRepository),
      child: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Todos'),
          ),
          // floatingActionButton: FloatingActionButton(
          //   onPressed: () {
          //     // _addTodo(context);
          //     final newTodo = Todo(description: 'Todo 1');
          //     BlocProvider.of<TodoBloc>(context).add(CreateTodos(newTodo));
          //   },
          //   child: const Icon(Icons.add),
          // ),
          body: Column(
            // crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ActionButton(),
              TodoList(),
            ],
          )),
    );
  }

list_screen

class TodoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Todo todo;
    return BlocBuilder<TodoBloc, TodoState>(builder: (context, state) {
      if (state is TodoEmptyState) {
        return const Center(
          child: Text(
            'No Todo',
            style: TextStyle(fontSize: 20.0),
          ),
        );
      }

      if (state is TodoLoadingState) {
        return const Center(child: CircularProgressIndicator());
      }

      // final todos = (state is TodoLoadedState);
      // return Container();

      if (state is TodoLoadedState) {
        return ListView.builder(
            shrinkWrap: true,
            itemCount: state.loadedUser.length,
            itemBuilder: (context, index) =>
                // return _buildListTile(state.loadedUser[index]);
                Expanded(
                    child: Container(
                        child: ListTile(
                            title: Column(children: [
                  Text('${state.loadedUser[index].description}')
                ])))));
      }
      return const SizedBox.shrink();
    });
  }

Answer 1

尝试像这样更改您的主页小部件代码：

class HomePage extends StatelessWidget {
  final todoRepository = TodoRepository();

  @override
  Widget build(BuildContext context) {
    // final TodoBloc todoBloc = context.read<TodoBloc>();
    return BlocProvider<TodoBloc>(
      create: (context) => TodoBloc(todoRepository),
      child: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Todos'),
          ),
          // floatingActionButton: FloatingActionButton(
          //   onPressed: () {
          //     // _addTodo(context);
          //     final newTodo = Todo(description: 'Todo 1');
          //     BlocProvider.of<TodoBloc>(context).add(CreateTodos(newTodo));
          //   },
          //   child: const Icon(Icons.add),
          // ),
          body: SingleChildScrollView(
            child: Column(
              // crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ActionButton(),
                TodoList(),
              ],
            ),
          )),
    );
  }
}

并添加这一行

physics: const NeverScrollableScrollPhysics(),

到您的ListView.builder() 小部件中的TodoList 小部件

---

说明： 当您的屏幕内容超过其高度时，您需要使用可滚动的小部件（如SingleChildScrollView）将其包裹起来，以允许滚动访问剩余的内容。 但是，如果您的父可滚动小部件中有另一个可滚动小部件（您的 ListView 在您的 TodoList 小部件中，则滚动将会发生冲突。这就是为什么您可以将 NeverScrollableScrollPhysics() 添加到子可滚动小部件以允许滚动父级只能滚动。

---

更新：

对于Exception caught by widgets library Incorrect use of ParentDataWidget 错误，这是因为您的TodoList 小部件中有一个Expanded 小部件作为ListView 小部件的直接子级。所以删除 Expanded 小部件将修复错误

return ListView.builder(
  shrinkWrap: true,
  itemCount: state.loadedUser.length,
  itemBuilder: (context, index) => Container(
    child: ListTile(
      title: Column(
        children: [
          Text('${state.loadedUser[index].description}'),
        ],
      ),
    ),
  ),
);

注意：我保留了您的 Container 小部件，以防您出于向 ListTile 添加更多样式的原因放置它，但如果您不打算对它做任何事情，我建议您将其删除。

Answer 2

您可以尝试使用 SingleChildScrollView Widget 来克服溢出问题。

和

使用 Column 或 Row Widget 包裹 Expanded Widget。

喜欢-

   Column(
                children: [
                  Expanded(child: Text("")),
                ],
              )