Flutter - Column中Expanded Widget内的文本溢出

34 浏览
0 Comments

Flutter - Column中Expanded Widget内的文本溢出

我的目标是在固定高度的Column中放置一个文本小部件。当文本很长时,我希望设置为的overflow属性生效。Text小部件的maxLines属性设置为一个很高的值,以允许它向下换行。但列中也有其他小部件,包括在文本小部件之前和之后。文本小部件放在一个Expanded小部件中,以便它占据列中的尽可能多的空间。完整的代码如下。

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

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

\"enter

admin 更改状态以发布 2023年5月21日
0
0 Comments

根据我的经验,你应该像这篇文章中所说的那样给包含溢出文本的Container指定一个固定宽度。 Flutter- wrapping text

0
0 Comments

尝试使用“弹性”而不是“可扩展”来包裹列。

我也遇到了文本在列中溢出的问题,将列本身用“弹性”包裹可以使文本变小。

         Flexible(
          child: Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                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'),
                ),
              ],
            ),
          ),
        ),

0