在列表视图构建器中颤动列表视图构建器

Question

我对 flutter 没有太多经验。

我想使用 Dart 和 Flutter 的 language_tool 库 (https://pub.dev/packages/language_tool)。

为了显示从 tool() 函数获取的数据，我创建了一个 FutureBuilder，里面有一个 ListView.builder，它返回一个 Column。

我希望列中有 2 个孩子： 1- 以 error.issueDescription 作为文本的文本（对于每个“错误”） 2-另一个返回列表错误元素的ListView。每个“错误”的替换

有人知道我该如何解决吗？

下面我放置了我创建的代码，该代码工作正常，直到我将 Listview 构建器放入第一个 ListView 构建器中。

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

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

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

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele';


  Future<List<WritingMistake>> tool(String text) async {
    var tool = LanguageTool();
    var result = tool.check(text);
    var correction = await result;

    List<WritingMistake> mistakes = [];

    for (var m in correction) {

      WritingMistake mistake = WritingMistake(
        message: m.message,
        offset: m.offset,
        length: m.length,
        issueType: m.issueType,
        issueDescription: m.issueDescription,
        replacements: m.replacements,
      );

      mistakes.add(mistake);
    }

    print(mistakes.length);
    print(mistakes);

    return mistakes;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              color: Colors.red,
              height: 150.0,
              width: double.infinity,
              child: Center(
                  child: Text(text, style: const TextStyle(fontSize: 20.0))),
            ),
            FutureBuilder(
                future: tool(text),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return const Center(
                      child: Text('Loading...'),
                    );
                  } else {
                    return SizedBox(
                      height: 200.0,
                      child: ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder:
                              (BuildContext context, int mistakeIdIndex) {
                            return Column(
                              children: [
                                Text(snapshot
                                    .data[mistakeIdIndex].issueDescription),
                                // this is where the problems begin
                                ListView.builder(
                                    itemCount: snapshot.data[mistakeIdIndex]
                                        .replacements.length,
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return Text(snapshot.data[mistakeIdIndex]
                                          .replacements[index]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ),
    );
  }
}

我希望我说得很清楚，有人可以帮助我。

谢谢你:)

Answer 1

您不能将 listview-builder 作为 column 的子项，请尝试将 Column 小部件更改为 ListView 并将其shrinkWrap 属性设置为 true。

ListView(
          children: [
            Container(
              color: Colors.red,
              height: 150.0,
              width: double.infinity,
              child: Center(
                  child: Text(text, style: const TextStyle(fontSize: 20.0))),
            ),
            FutureBuilder(
                future: tool(text),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return const Center(
                      child: Text('Loading...'),
                    );
                  } else {
                    return SizedBox(
                      height: 200.0,
                      child: ListView.builder(
                       shrinkWrap:true,
                          itemCount: snapshot.data.length,
                          itemBuilder:
                              (BuildContext context, int mistakeIdIndex) {
                            return ListView(
                             shrinkWrap:true,
                              children: [
                                Text(snapshot
                                    .data[mistakeIdIndex].issueDescription),
                                // this is where the problems begin
                                ListView.builder(
                                   shrinkWrap:true,
                                    itemCount: snapshot.data[mistakeIdIndex]
                                        .replacements.length,
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return Text(snapshot.data[mistakeIdIndex]
                                          .replacements[index]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ), 

Answer 2

我认为可能有两种解决方案：

1- 将 listview.builder 包装在 Expanded 小部件而不是 SizedBox 中。

2- 将 Column Widget 包裹在 SizedBox 内并加高它。