Flutter - 列内扩展小部件内的文本溢出 [英] Flutter - Text inside an Expanded Widget within a Column overflowing

问题描述

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

What I want to achieve is to have a text widget inside a Column of fixed height. When the text is long I want the overflow property which is set to TextOverflow.ellipsis to kick in. The Text widget has its maxLines property set to a high value to allow it to wrap down. But there are other widgets in the column too, both before and after the text widget. The text widget is in an Expanded widget so that it takes up as much room in the column. Full code is pasted below.

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

The problem with this setup is that the text is overflowing its container parent. I have a border decoration on the container that shows this happening. Why is this happening and how do I fix it.

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

推荐答案

尝试使用Flexible"而不是可扩展来包装您的列.

Try wrapping your column with 'Flexible' instead of expandable.

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

I had the same issue with text overflowing in column and wrapping column itself with 'flexible' allowed to make text smaller.

         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'),
                ),
              ],
            ),
          ),
        ),

这篇关于Flutter - 列内扩展小部件内的文本溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！