文本在ListView中脱离映射

Question

面临以下问题。我有一个ListView，其中卡片是堆叠的当我有很长的文本时它会消失在我用ClipPath切割卡片的地方。我怀疑问题是我正在使用Stack，但如果没有它，我不知道如何将按钮放置在右上角。我在下面附上了一个截图，展示了我的文本是如何从卡片中出来的，我需要它换行到新的一行。我怎么能使文本始终可见，并将其移动到新的行，如果它不适合一行?

Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Expanded(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(
itemCount: nearby.length,
itemBuilder: (context, int index) => Padding(
padding:
EdgeInsets.only(bottom: index == nearby.length - 1 ? 80 : 0),
child: Container(
margin: const EdgeInsets.symmetric(vertical: 10),
child: Stack(
// fit: StackFit.loose,
children: [
ClipPath(
clipper: OrderCardClipper(right: 0, holeRadius: 60),
child: Container(
width: size.width,
height: 247,
decoration: BoxDecoration(
color: constants.Colors.greyXDark.withOpacity(0.5),
borderRadius: const BorderRadius.all(
Radius.circular(16),
),
),
child: Padding(
padding: const EdgeInsets.all(12),
child: _content(context, index),
),
),
),
Positioned(
right: 7,
child: Column(
children: [
_directionButton(),
const SizedBox(
height: 50,
),
],
),
),
],
),
),
),
),
),
);
}
Widget _content(BuildContext context, index) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
flex: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_stationImage(),
const SizedBox(height: 4),
],
),
const SizedBox(
width: 12,
),
Expanded(
child: _stationInfoWidget(index),
),
],
),
),
Flexible(
flex: 1,
child: Divider(
thickness: 0.2,
height: 10,
color: Colors.white.withOpacity(0.3),
),
),
const SizedBox(height: 2),
Flexible(
flex: 2,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: nearby.length,
itemBuilder: (context, int index) => Container(
height: 32,
width: 32,
decoration: BoxDecoration(
color: constants.Colors.white.withOpacity(0.15),
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: SvgPicture.asset(
nearby.keys.elementAt(index),
width: 12,
),
),
),
),
const SizedBox(height: 2),
Flexible(
flex: 1,
child: Divider(
thickness: 0.2,
height: 10,
color: Colors.white.withOpacity(0.3),
),
),
Expanded(
flex: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const SizedBox(height: 10),
Flexible(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'0.13 JC/KWh',
style: constants.Styles.normalHeavyTextStyleWhite,
),
),
SizedBox(
height: 36,
width: 147,
child: DefaultButtonGlow(
shadowColor: constants.Colors.purpleMain,
text: 'Book Again',
onPressed: () {},
color: constants.Colors.purpleMain,
borderColor: Colors.transparent,
textStyle: constants.Styles.buttonTextStyle,
),
),
],
),
),
],
),
),
],
);
Widget _stationImage() {
return Flexible(
flex: 4,
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: SizedBox(
width: 90,
child: Image.asset(
'assets/images/background/splash_background_logo.png',
fit: BoxFit.cover,
),
),
),
],
),
);
}
Widget _stationInfoWidget(index) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Andy K. Station lorem i',
style: constants.Styles.bigLtStdRomanTextStyleWhite,
),
Text(
'21 Yohansburg Blvd, Oslo',
style: constants.Styles.smallerBookTextStyleWhite
.copyWith(color: constants.Colors.white.withOpacity(0.5)),
),

这是部分文本消失的方式，但它需要被转移

Answer 1

您是正确的，在堆栈中，后一个小部件将始终呈现在其他小部件的顶部。为了达到预期的结果，对于一个简单的解决方案，您只需将ClipPath的宽度更改为

size.width - (size of direction button + its padding and margin )

但是一个更好的解决方案是不要使用堆栈，并在行和列中布局所有内容，并在需要小部件的地方使用灵活/扩展来占用所需的空间。例如:

Column(
children: [ 
Row(
children: [
Expanded(
child: YourTitle()),
DirectionButton(),
]),
the rest of the widgets ...