flutter - 如果溢出，Flutter ListView 文本会显示在多行上

Question

我有一个列表视图，其中我有另一个列表视图以水平显示简单文本，但问题是它在左侧溢出如果我给列表视图提供宽度，它将滚动列表。我想如果它溢出那么它会简单地转到下一行而不是溢出或滚动。

我的代码

Expanded(
  child: new ListView.builder(
    itemCount: respondedData3['data'].length,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    physics: ScrollPhysics(),
    itemBuilder: (context, index) {
      String TimeFormat = DateFormat("yyyy-MM-dd").format(DateTime.parse(respondedData3['data'][index]['appointmentDate']));

      return Padding(
        padding: const EdgeInsets.only(left: 15, right: 15),
        child: Container(
          child: GestureDetector(
            onTap: () async {
              Navigator.pop(context);
            },
            // onTap: widget.onPressed,
            child: Stack(children: [
              Container(
                height: 80,
                width: double.infinity,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Column(
                          children: [
                            Text(TimeFormat, style: TextStyle(fontSize: 14, fontFamily: 'SegoeUI-Bold', color: kPrimaryColor)),
                            Text(respondedData3['data'][index]['appointmentTime'].toString(), style: TextStyle(fontSize: 13, fontFamily: 'SegoeUI', color: textGreyColor))
                          ],
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Container(
                          color: Colors.grey,
                          height: 40,
                          width: 1.5,
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          children: [
                            Text(respondedData3['data'][index]['serviceProviderName'].toString(), style: TextStyle(fontSize: 13, fontFamily: 'SegoeUI-Bold', color: textGreyColor)),
                            Container(
                              height: 20.0,
                              child: ListView.builder(
                                shrinkWrap: true,
                                scrollDirection: Axis.horizontal,
                                itemCount: serviceShow.length,
                                itemBuilder: (BuildContext context, int index) => Text('${serviceShow[index]["Name"]} ${serviceShow[index]["Time"]} ${serviceShow[index]["Price"]}'),
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ]),
          ),
        ),
      );
    },
  ),
)

您可以在图像中看到它显示溢出错误，我需要在第二行中显示它。

标签： flutterdart

Answer 1

在您的文本上添加最大行数

  Text(
    'Your multiline text',
    maxLines: 2, //2 or more line you want
    overflow: TextOverflow.ellipsis,
    ),
  ),