Flutter 颤振缠绕布局不';t扩展到全部可用宽度
我正在创建一个动态列表,创建下图所示的布局。但在较小的屏幕上,“已发布”文本行和删除图标中出现像素溢出。为了解决这个问题,我将它们包装在一个Flutter 颤振缠绕布局不';t扩展到全部可用宽度,flutter,dart,Flutter,Dart,我正在创建一个动态列表,创建下图所示的布局。但在较小的屏幕上,“已发布”文本行和删除图标中出现像素溢出。为了解决这个问题,我将它们包装在一个Wrap小部件中,以便图标可以流向新行。但是由于某些原因,Wrap小部件没有扩展到完全可用的水平宽度。 我想在“已发布”文本和删除图标之间放置一个Spacer(),或者只对齐spacebetween,但我无法在Wrap小部件中放置spacebetween(),而spacebetween对齐没有效果,因为文本和图标之间没有可用空间 SliverList(
Wrap
小部件中,以便图标可以流向新行。但是由于某些原因,Wrap小部件没有扩展到完全可用的水平宽度。我想在“已发布”文本和删除图标之间放置一个
Spacer()
,或者只对齐spacebetween
,但我无法在Wrap
小部件中放置spacebetween()
,而spacebetween
对齐没有效果,因为文本和图标之间没有可用空间
SliverList(
delegate: SliverChildListDelegate(
[
for (var i = 0; i < children.length; i++)
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10.0, left: 20.0),
child: Text(
children[i].issuanceDate,
),
),
Column(
//vertical line with round dot
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.white,
boxShadow: [
BoxShadow(
color: (Colors.grey[200])!,
offset: const Offset(0, 8),
blurRadius: 8,
spreadRadius: 1.0,
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
children[i].credentialSubject.documentName,
style:
Theme.of(context).textTheme.bodyText1,
),
],
),
Wrap(
alignment: WrapAlignment.spaceBetween,
crossAxisAlignment: WrapCrossAlignment.center,
children: [ Text("${L.of(context).issued}${children[i].issuanceDate}",
style: Theme.of(context)
.textTheme
.bodyText2!
.copyWith(
color: Theme.of(context)
.colorScheme
.onBackground
.withOpacity(0.5)),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
IconButton(
icon: Icon(
Icons.delete,
color: Theme.of(context).errorColor,
),
onPressed: () => print("delete $i"),
),
],
)
],
),
),
),
),
],
)
],
),
),
SliverList(
委托:SliverChildListDelegate(
[
对于(变量i=0;i打印(“删除$i”),
),
],
)
],
),
),
),
),
],
)
],
),
),
只需替换柱交叉轴对齐即可拉伸:
。。。
子:列(
crossAxisAlignment:crossAxisAlignment.stretch,//!!!!!这里
儿童:[
划船(
儿童:[
正文(
children[i].credentialSubject.documentName,
风格:
Theme.of(context).textTheme.bodyText1,
),
...
是的,我的包装工作正常。我现在在包装上方的列上添加了CrossAxisAlignment.stretch
,现在我还获得了图标和文本之间的空间