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

Question

列表不够space，好像我以前这样做过，一切正常，但现在不行了。我最近开始开发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(),

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

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

更新：

对于错误 Exception caught by widgets library Incorrect use of ParentDataWidget，这是因为您在 TodoList 小部件中有一个 Expanded 小部件作为 ListView 小部件的直接 child。所以删除 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 来解决 Overflow 问题。

和

用列或行小部件包裹展开的小部件。

喜欢-

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

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

I don't understand how to fix the error with a list

dart

flutter

flutter-layout