Flutter - Column中Expanded Widget内的文本溢出
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)) ], ) ], )))) ]))), ), ), ); } }
admin 更改状态以发布 2023年5月21日
尝试使用“弹性”而不是“可扩展”来包裹列。
我也遇到了文本在列中溢出的问题,将列本身用“弹性”包裹可以使文本变小。
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'), ), ], ), ), ),