Flutter 如何防止行占用所有可用宽度？
我的Flutter 如何防止行占用所有可用宽度？,flutter,dart,Flutter,Dart,我的定制芯片有一个问题： 我需要把卡片包装起来，只适合里面的内容 然而，我有第二个要求：长文本应该溢出褪色 当我修复第二个问题时，当我添加Expanded来包装内部行时，这个问题开始出现 我不明白为什么内部行似乎也在扩展，尽管它的mainAxisSize已设置为min 代码如下： 屏幕： import 'package:flutter/material.dart'; import 'package:app/common/custom_chip.dart'; class RowInsideEx
定制芯片有一个问题：
我需要把卡片包装起来，只适合里面的内容
然而，我有第二个要求：长文本应该溢出褪色
当我修复第二个问题时，当我添加Expanded
来包装内部行时，这个问题开始出现
我不明白为什么内部行
似乎也在扩展，尽管它的mainAxisSize
已设置为min
代码如下：
屏幕：
import 'package:flutter/material.dart';
import 'package:app/common/custom_chip.dart';
class RowInsideExpanded extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
),
),
width: 200.0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildChip('short'),
_buildChip('looooooooooooooooooooooongg'),
],
),
),
),
);
}
_buildChip(String s) {
return Row(
children: [
Container(
color: Colors.red,
width: 15,
height: 15,
),
Expanded(
child: CustomChip(
elevation: 0.0,
trailing: Container(
decoration: BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
child: Icon(Icons.close),
),
onTap: () {},
height: 42.0,
backgroundColor: Colors.black12,
title: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
s,
softWrap: false,
overflow: TextOverflow.fade,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16.0),
),
),
),
),
],
);
}
}
以及CustomChip
import 'package:flutter/material.dart';
class CustomChip extends StatelessWidget {
final Widget leading;
final Widget trailing;
final Widget title;
final double height;
final double elevation;
final Color backgroundColor;
final VoidCallback onTap;
const CustomChip({
Key key,
this.leading,
this.trailing,
this.title,
this.backgroundColor,
this.height: 30.0,
this.elevation = 2.0,
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
elevation: elevation,
color: backgroundColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
child: InkWell(
onTap: onTap,
child: Container(
height: height,
child: Padding(
padding: const EdgeInsets.only(left: 5.0, right: 5.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
leading ?? Container(),
SizedBox(
width: 5.0,
),
Flexible(
child: title,
fit: FlexFit.loose,
),
SizedBox(
width: 5.0,
),
trailing ?? Container(),
],
),
),
),
),
);
}
}
导入“包装：颤振/材料.省道”；
类CustomChip扩展了无状态小部件{
最终引导；
最终窗口小部件跟踪；
最终小部件标题；
最终双倍高度；
最终双立面图；
最终颜色背景色；
最终确认为onTap；
常数定制芯片({
关键点，
这个,领导,，
这个,拖尾,，
这个名字，
这个背景色，
此高度：30.0，
该高度=2.0，
这个.onTap，
})：super（key:key）；
@凌驾
小部件构建（构建上下文）{
回程卡(
标高：标高，
颜色：背景色，
形状：圆形矩形边框(
边界半径：边界半径。圆形（30.0），
),
孩子：InkWell(
onTap:onTap，
子：容器(
高度:高度,，
孩子：填充(
填充：仅限常量边集（左：5.0，右：5.0），
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
前导？？容器（），
大小盒子(
宽度：5.0，
),
灵活的(
孩子：头衔，
适合：FlexFit.宽松，
),
大小盒子(
宽度：5.0，
),
尾随？？容器（），
],
),
),
),
),
);
}
}
查找“MainAxisSize”属性并设置为“MainAxisSize.min”而不是扩展的
，只需将其替换为灵活的
，这是因为扩展的
继承了灵活的
，但将合适的
属性设置为灵活的
紧密的
当fit
为FlexFit.tight
时，Flexible
的任何Flexible
小部件后代的框约束将获得相同的框约束。这就是为什么您的行
即使已将其MainAxisSize
设置为min
仍会展开。
我使用LayoutBuilder
小部件更改了您的代码以打印方框合同。
考虑扩展的代码：
import 'package:flutter/material.dart';
class RowInsideExpanded extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
),
),
width: 200.0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildChip('short'),
SizedBox(
height: 5,
),
_buildChip('looooooooooooooooooooooongg'),
],
),
),
),
);
}
_buildChip(String s) {
return Row(
children: [
Container(
color: Colors.red,
width: 15,
height: 15,
),
Expanded(
child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
print("outter $constraints");
return Container(
color: Colors.greenAccent,
child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
print("inner $constraints");
return Row(
mainAxisSize: MainAxisSize.min, // this is ignored
children: <Widget>[
SizedBox(
width: 5.0,
),
Flexible(
fit: FlexFit.loose,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
s,
softWrap: false,
overflow: TextOverflow.fade,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16.0),
),
),
),
SizedBox(
width: 5.0,
),
Container(
decoration: BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
child: Icon(Icons.close),
),
],
);
}),
);
}),
),
],
);
}
}
（查看w
中的宽度，外部和内部行的宽度都限制在零和183.0
之间
）
现在您的小部件已修复：
I/flutter ( 7075): outter BoxConstraints(0.0<=w<=183.0, 0.0<=h<=Infinity)
I/flutter ( 7075): inner BoxConstraints(0.0<=w<=183.0, 0.0<=h<=Infinity)