Flutter - 列内扩展小部件内的文本溢出答案

【问题标题】：Flutter - Text inside an Expanded Widget within a Column overflowingFlutter - 列内扩展小部件内的文本溢出
【发布时间】：2019-02-11 20:15:35
【问题描述】：

我想要实现的是在固定高度的列内有一个文本小部件。当文本很长时，我希望设置为TextOverflow.ellipsis 的overflow 属性启动。Text 小部件将其maxLines 属性设置为一个较高的值以允许它折叠。但是列中也有其他小部件，在文本小部件之前和之后。文本小部件位于扩展小部件中，因此它在列中占用尽可能多的空间。完整代码粘贴在下面。

此设置的问题是文本溢出其父容器。我在容器上有一个边框装饰，显示了这种情况。为什么会发生这种情况，我该如何解决。

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Overflow"),
        ),
        body: Center(
          child: Container(
              width: 200.0,
              height: 250.0,
              child: Card(
                  child: Column(children: <Widget>[
                Image.asset(
                  "assets/bereket.jpg",
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
                Expanded(
                    child: Container(
                        padding: EdgeInsets.all(8.0),
                        child: (Column(
                          children: [
                            Text(
                                "በረከት ስምኦን፡ «ወይዘሮ አና ጎሜዝ፤ እርስዎ አያገባዎትም! አርፈው ይቀመጡ በልልኝ»",
                                maxLines: 2,
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .subhead
                                    .copyWith(
                                      color: Colors.black,
                                    ),
                                overflow: TextOverflow.ellipsis),
                            Expanded(
                                child: Container(
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Colors.green, width: 2.0),
                                    ),
                                    child: Text(
                                      """ባለፉት ሁለት አስርት ዓመታት በኢትዮጵያ ፖለቲካ ከፍተኛ ተጽእኖ ፈጣሪ የነበሩት አቶ በረከት ስምኦን በቅርቡ ከብአዴን ማእከላዊ ኮሚቴ አባልነት መታገዳቸው ይታወሳል።

አቶ በርከት የብአዴን ውሳኔን በተመለከተ እና የወደፊት የፖለቲካ ህይወታቸው ምን ሊሆን እንደሚችል ለቢቢሲ አጋርተዋል።""",
                                      maxLines: 10,
                                      style: Theme.of(context)
                                          .primaryTextTheme
                                          .caption
                                          .copyWith(color: Colors.black),
                                      overflow: TextOverflow.ellipsis,
                                    ))),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  width: 20.0,
                                  height: 20.0,
                                  child: Image.asset("assets/bbc.png"),
                                ),
                                SizedBox(width: 8.0),
                                Text('ቢቢሲ - ከሁለት ሰአት በፊት',
                                    style: Theme.of(context)
                                        .textTheme
                                        .caption
                                        .copyWith(fontSize: 10.0))
                              ],
                            )
                          ],
                        ))))
              ]))),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

从该行中删除 enter-bar('\n') ，此行将是省略号。

【讨论】：

【解决方案2】：

尝试使用“灵活”而不是可扩展来包装您的列。

我遇到了同样的问题，文本在列中溢出，并且使用“灵活”包装列本身可以使文本更小。

         Flexible(
          child: Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Name',
                    style: CustomTextStyle.blueTitle14(context),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 4.0),
                  child: Text('Long text'),
                ),
              ],
            ),
          ),
        ),

【讨论】：

【解决方案3】：

根据我的经验，您应该按照这篇文章为包含溢出文本的Container 分配一个固定宽度。 Flutter- wrapping text 。

【讨论】：