我有一个 exoansiontile,我希望它像一个盒子,一切都居中,问题是,如果我添加太长的文本,我会收到溢出错误,我认为这是由扩展图块的尾随引起的。这是一张图片: https://gyazo.com/c29329106dc5dcb162b71b5f41951b67
这是代码:
ExpansionTile(
trailing: Text(''),
leading: Container(
margin: new EdgeInsets.only(left: 0, top: 10.0, right: 0.0, bottom: 0.0),
child: Image.asset(
'images/food.png'
)),
title: Row(
children: < Widget > [
Padding(
padding: const EdgeInsets.only(right: 0, left: 10, top: 15, bottom: 15),
child: Column(textDirection: TextDirection.ltr, crossAxisAlignment: CrossAxisAlignment.start, children: < Widget > [
Container(
margin: new EdgeInsets.only(left: 0.0, top: 7.0, right: 0.0, bottom: 3.0),
child: Text(
'Food System', textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
)),
Text(
'Customize the food system', textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
)
])),
], ),
children: < Widget > [
Container(
width: 300,
margin: new EdgeInsets.only(left: 10.0, top: 0.0, right: 10.0, bottom: 10.0),
color: Colors.transparent,
child: new Container(
padding: new EdgeInsets.all(20),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: < Widget > [
Container(
margin: new EdgeInsets.only(left: 15.0, top: .0, right: 20.0, bottom: 5.0),
child: Text('Storage', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ),
Center(child: Column(children: < Widget > [
Container(
child: Column(children: < Widget > [
Text('2.4 KG left - 7 Days', style: TextStyle(color: Colors.white, fontSize: 20)),
Text('200 G / Meal - 600 G / Day', style: TextStyle(color: Colors.white, fontSize: 20)),
], ),
margin: new EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 10.0),
)
], )),
Container(
margin: new EdgeInsets.only(left: 18.0, top: .0, right: 20.0, bottom: 5.0),
child: Text('Meal times', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ),
Center(child: Column(children: < Widget > [
Text('1. Breakfast - 8:30 AM', style: TextStyle(color: Colors.white, fontSize: 20)),
Text('2. Lunch - 2:00 PM', style: TextStyle(color: Colors.white, fontSize: 20)),
Text('3. Dinner - 9:15 PM', style: TextStyle(color: Colors.white, fontSize: 20)),
], ))
], ), )
),
Container(
height: 50.0,
width: 300,
margin: new EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0),
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Color(0xff37b9ff), Color(0xff5d3afd)]),
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
)
),
child: Center(child:
Text('Edit', style: TextStyle(color: Colors.white, fontSize: 15))
, )
)
),
]
我通过使用找到了解决方案
Matrix4.translationValues
ExpansionTile(
title: Container(
transform: Matrix4.translationValues(48, 0, 0),
color: Colors.red,
child: Text("title"),
),
children: [],
trailing: const SizedBox(),
)
我已经尝试过建议的解决方案,但我发现自己没有必要覆盖任何内容或使用其他库。怎么办?
你可以试试这段代码:
trailing: (shouldBeEmpty)
? const SizedBox()
: Icon(
selected
? Icons.keyboard_arrow_up
: Icons.keyboard_arrow_down,
color: Colors.red,
),
我添加了一个额外的条件,但基本上如果您想隐藏尾随,请将
SizedBox()
或任何 non-visible
小部件作为尾随。
您现在只需在 ExpansionTile 中将
showTrailingIcon
更改为 false
图标预留的空间也被释放了:
return ExpansionTile(
showTrailingIcon: false,
title: Text("Title"),
children: [Text("child")],
),