时间戳

首页 > 解决方案 > Flutter：如何将文本拆分为 2 行

flutter - Flutter：如何将文本拆分为 2 行

问题描述

我正在使用列来显示 2 个文本。第一个文本代表标题，第二个文本显示引用。我正在尝试使用 max line 的属性将引用文本拆分为多行，但文本与其他项目重叠。我尝试使用Expanded和灵活的属性来克服这个问题，但我仍然没有得到想要的输出。这就是我想要做的：

Container(
                      color: Color(0xff1D1D1D),
                      width: double.maxFinite,
                      height: responsivness.safeBlockVertical! * 54.55,
                      // Stories Title
                      child: Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text("Stories",
                                style: Theme.of(context).textTheme.headline1!),
                          ),
                          // list of Stories
                          Expanded(
                            child: ListView.builder(
                              itemCount: 5,
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, index) {
                                return Stack(
                                  clipBehavior: Clip.none,
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.all(h * .014),
                                      child: Container(
                                        width:
                                            responsivness.safeBlockHorizontal! *
                                                47,
                                        height:
                                            responsivness.safeBlockVertical! *
                                                17,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(10),
                                          color: Colors.amber,
                                        ),
                                      ),
                                    ),
                                    Positioned(
                                      top: h * .19,
                                      left: h * .016,
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            "Steve H.",
                                            style: Theme.of(context)
                                                .textTheme
                                                .headline1!,
                                          ),
                                          Text(
                                            "I bet away my house and all the money i got",
                                            style: Theme.of(context)
                                                .textTheme
                                                .bodyText2!,
                                            maxLines: 2,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

这就是我得到的输出

标签： flutterflutter-layout

解决方案

由于 Stack 小部件，您的文本重叠。您可以将文本包装在一个大小合适的框中以提供固定宽度，也可以删除Stack小部件并使用 Column 代替。我在这里没有发现堆栈的任何特殊用途，因此您可能可以毫无问题地删除它。

推荐阅读