Flutter：如何將文本拆分為兩行

Question

我正在使用列來顯示 2 個文本。 第一個文本代表標題，第二個文本顯示引文。 我正在嘗試使用最大行的屬性將引文文本拆分為多行，但文本與其他項目重疊。 我嘗試使用Expanded和 flexible 屬性來解決這個問題，但我仍然沒有得到所需的 output。這就是我想要做的：

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,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

Answer 1

試試下面的代碼希望它對你有幫助。 我認為問題來自Stack小部件，因此刪除您的Stack和Positioned Widget ，並改用Column()小部件。

Padding(
      padding: const EdgeInsets.all(8.0),
      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 Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: 200,
                      height: 100,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.amber,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Steve H.",
                          ),
                          Text(
                            "I bet away my house and all the money i got",
                            style: Theme.of(context).textTheme.bodyText2!,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ],
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    ),

您的結果屏幕->

Answer 2

嘗試用固定寬度的SizedBox包裹重疊的Text ，看看它是否能解決您的問題。

Answer 3

由於 Stack 小部件，您的文本重疊。 您可以將文本包裹在一個大小的框內以提供固定寬度，或者您可以刪除Stack小部件並使用 Column 代替。 我在這里沒有發現堆棧的任何特殊用途，因此您可能可以毫無問題地將其刪除。

Answer 4

嘗試用容器包裝並指定任何寬度

Container(
        width: 100,
        child: Text(
        "I bet away my house and all the money i got",
        style: Theme.of(context).textTheme.subtitle1,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        ),
),

Answer 5

您是否嘗試過將文本包裝在 FittedBox() 中