dart flutter listview builder inside a listview builder

lsmepo6l  于 12个月前  发布在  Flutter
关注(0)|答案(2)|浏览(128)

我对扑翼没有太多经验。
我想使用language_tool库(https://pub.dev/packages/language_tool)来处理Dart和Flutter。
为了显示从tool()函数获得的数据,我创建了一个FutureBuilder,其中包含一个ListView.builder,它返回一个列。
我想有2列内的孩子:1-一个文本与错误。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]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ),
    );
  }
}

字符集
我希望我说得很清楚,有人可以帮助我。
Thank you:)

doinxwow

doinxwow1#

您不能给予listview-builder作为的子级,请尝试将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]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ),

字符集

z4iuyo4d

z4iuyo4d2#

我认为可能有两个解决方案:
1-将listview.builder Package 在Expanded widget中,而不是SizedBox中。
2-将列小部件 Package 在SizedBox中并将其放大。

相关问题