Flutter忽略了溢出和换行设置。
Flutter忽略了溢出和换行设置。
我正在努力了解Flutter为什么忽略了我的Text控件中的overflow和wrap设置。
Card( borderOnForeground: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0), side: BorderSide( color: Colors.grey[200], width: 1.0, ), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), child: Column(children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ CircleAvatar( backgroundImage: widget.user.profileImageUrl.isEmpty ? const AssetImage( 'assets/images/avatar-5.png') : CachedNetworkImageProvider( widget.user.profileImageUrl, )), const SizedBox(width: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '${widget.user.firstName} ${widget.user.lastName[0]}'), Text(task.desc, overflow: TextOverflow.fade, maxLines: 2, softWrap: false, style: Theme.of(context) .textTheme .bodyText1), ]), ], ), Row(children: [ const Icon(Icons.calendar_today_outlined, size: 12), const SizedBox(width: 6), Text(DateFormat('E, d MMM').format(task.due), style: Theme.of(context).textTheme.caption) ]), ]), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ _buildBudget(formatCurrency.format(widget.task.budget)) ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Row(children: [ const Icon(Icons.location_on_outlined, size: 12), const SizedBox(width: 6), Text(task.location, style: Theme.of(context).textTheme.caption) ]), ], ),
admin 更改状态以发布 2023年5月21日
将您的Column
包装在Expanded
中,应该会起作用
Expanded(child:Column(...))
并尝试在此处添加Expanded
(包装Row
)(代码中的最后一行):
Padding( padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), child: Column(children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded(child:Row( ////HERE
Row
未指定宽度,因此子元素之一应为Expanded
好的,我已测试过... 这是完整的代码:
Card( borderOnForeground: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0), side: BorderSide( color: Colors.grey, width: 1.0, ), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), child: Column(children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Row( children: [ CircleAvatar(backgroundImage: const AssetImage('assets/images/avatar-5.png')), const SizedBox(width: 10), Expanded( child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('${'widget.user.firstName'} '), Text('task.desc', overflow: TextOverflow.fade, maxLines: 2, softWrap: false, style: Theme.of(context).textTheme.bodyText1), ]), ), ], ), ), Row(children: [ const Icon(Icons.calendar_today_outlined, size: 12), const SizedBox(width: 6), Text('DateFormat( ).format(task.due)', style: Theme.of(context).textTheme.caption) ]), ]), Row( mainAxisAlignment: MainAxisAlignment.end, children: [Text('dff')], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Row(children: [ const Icon(Icons.location_on_outlined, size: 12), const SizedBox(width: 6), Text('task.location', style: Theme.of(context).textTheme.caption) ]) ], ) ])));
这里有一个类似的问题,可能会对你有帮助:
Flutter - Wrap text on overflow, like insert ellipsis or fade
要实现所需的效果,您必须告诉文本小部件它们应该占用多少空间。例如,通过使用 Flexible
或 Expanded
包装您的列(溢出文本小部件的父级)。
我试图简化您的示例,使其更明显:
class CardWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Card( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), child: Column( children: [ // Your other widegts // Row(children: [ ... ]), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Your circle avatar with a constant size Container(width: 50, height: 50, color: Colors.red), const SizedBox(width: 10), // The important part Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text('Firstname Lastname'), const Text( 'Really long description that does not fit on to the screen', overflow: TextOverflow.fade, maxLines: 2), ], ), ), ], ), // Your other widegts // Row(children: [ ... ]), ], ), ), ); } }
请注意,应该删除 softWrap: false
。如果为 false,则文本中的字形将定位得好像有无限的水平空间。
如果文本超过两行,淡化的溢出效果将可见。如果您不想要这个效果,只需删除 maxLines
属性即可。
完整示例
这里是一个完整的示例,其结构将在假定位置、日期和预算小部件应在同一行的 ListView
内工作:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: ListView(shrinkWrap: true, children: [ CardWidget(), CardWidget(), CardWidget(), ]), ); } } class CardWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Card( borderOnForeground: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0), side: BorderSide( width: 1.0, ), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), child: Column( children: [ Row( children: [ Container(height: 50, width: 50, color: Colors.red), const SizedBox(width: 10), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('Firstname Lastname'), Text( "Long text that exceeds multiple lines. Long text that exceeds multiple lines. Long text that exceeds multiple lines", overflow: TextOverflow.fade, maxLines: 3, style: Theme.of(context).textTheme.bodyText1), ], ), ), ], ), const SizedBox(height: 25), Row( children: [ // Location and Date Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ const Icon(Icons.location_on_outlined, size: 12), const SizedBox(width: 6), Text("Location"), ], ), const SizedBox(width: 25), Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ const Icon(Icons.calendar_today_outlined, size: 12), const SizedBox(width: 6), Text("Date"), ], ), // The budget widget Expanded(child: Container()), Text("200"), ], ), ], ), ), ); } }