当滚动方向为水平时，文本溢出不起作用。我怎样才能TextOverflow.ellipsis正常工作？

Question

我想用卡片溢出列中的长文本。文本必须超出卡片的宽度。由于这个原因，滚动方向设置为 Axis.horizontal TextOverflow 不会传递到第二行或溢出。你有什么建议吗？

SingleChildScrollView(
                                                  scrollDirection:
                                                      Axis.horizontal,
                                                  child: Row(
                                                    children: [
                                                      Column(
                                                        children: [
                                                          Flexible(
                                                            flex: 5,
                                                            child: SizedBox(
                                                              width: 80.w,
                                                              height: 80.h,
                                                              child: Card(
                                                                  elevation: 2,
                                                                  shape: RoundedRectangleBorder(
                                                                      borderRadius:
                                                                          BorderRadius.circular(
                                                                              10.r)),
                                                                  child: Center(
                                                                    child: Image
                                                                        .network(
                                                                      productsProvider
                                                                          .randomProducts[
                                                                              itemIndex]
                                                                          .photo,
                                                                      fit: BoxFit
                                                                          .cover,
                                                                    ),
                                                                  )),
                                                            ),
                                                          ),
                                                          Flexible(
                                                            child: Text(
                                                              productsProvider
                                                                  .randomProducts[
                                                                      itemIndex]
                                                                  .name,
                                                              style: TextStyle(
                                                                  fontSize:
                                                                      10.sp),
                                                              overflow:
                                                                  TextOverflow
                                                                      .ellipsis,
                                                              maxLines: 2,
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                    ],
                                                  ),
                                                );
                                             

Here is the output

这是代码，大家可以看看会发生什么。它并不复杂，但我没有找到正常工作的解决方案。

ListView.builder(
        itemCount: strings.length,
        shrinkWrap: true,
        controller: _scrollController,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Padding(padding: EdgeInsets.only(bottom: 8)),
              Container(
                alignment: Alignment.centerLeft,
                child: Text(strings[index]),
                padding: EdgeInsets.only(bottom: 8, left: 8),
              ),
              Container(
                decoration: BoxDecoration(color: Colors.white),
                child: Padding(
                  padding: EdgeInsets.all(8),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 80,
                        width: MediaQuery.of(context).size.width,
                        child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemCount: 2,
                            itemBuilder: (BuildContext context, int itemIndex) {
                              return SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child: Row(
                                  children: [
                                    Column(
                                      children: [
                                        Flexible(
                                          flex: 5,
                                          child: SizedBox(
                                            width: 80,
                                            height: 80,
                                            child: Card(
                                                elevation: 2,
                                                shape: RoundedRectangleBorder(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            10)),
                                                child: Center(
                                                  child: Image.network(
                                                    'https://ayb.akinoncdn.com/products/2019/04/24/21736/788e20d1-81ca-42da-a6bb-25c2698fafaa_size780x780_quality60_cropCenter.jpg',
                                                    fit: BoxFit.cover,
                                                  ),
                                                )),
                                          ),
                                        ),
                                        Flexible(
                                          child: Text(
                                            'Osmanlı şahzade badem ezmesi. Üretimi tecrübeye sabit',
                                            style: TextStyle(fontSize: 10),
                                            overflow: TextOverflow.ellipsis,
                                            maxLines: 2,
                                          ),
                                        )
                                      ],
                                    ),
                                  ],
                                ),
                              );
                            }),
                      )
                    ],
                  ),
                ),
              ),
            ],
          );
        });

Answer 1

实际上背后的原因是你已经将 scrollDirection 设置为 horizontal 并且在其中你正在使用 Row 以及它也有一个horizontal axis direction 之后，您将在 Flexible 中传递文本小部件，并根据 Flexible 小部件 属性 它会根据它的 child 大小自行拉伸。在你的情况下 Flexible 有一个 unbounded 宽度所以它根据它的 child 自己扩展它导致 full length text 出现并且因为它显示完整内容 TextOverflow.ellipsis 将不起作用。

基本上 solve 你必须将你的 Text 小部件包装到 SizedBox 以便它可以有一个 bounded width.