У меня есть этот собственный виджет
class MyEventCard extends StatelessWidget {
const MyEventCard({
super.key,
required this.height,
required this.width,
required this.coloreChiaroSfondo,
required this.coloreScuro,
required this.data,
required this.image,
required this.sottotitolo,
required this.titolo,
});
final double height;
final double width;
final Color coloreChiaroSfondo;
final Color coloreScuro;
final String image;
final String data;
final String titolo;
final String sottotitolo;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
margin: EdgeInsets.symmetric(vertical: height * 0.005),
padding: EdgeInsets.symmetric(
horizontal: width * 0.02, vertical: width * 0.02),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(width * 0.02)),
color: coloreChiaroSfondo,
border: Border.all(
color: coloreScuro, // Colore del bordo
width: width * 0.001, // Larghezza del bordo
),
),
child: Row(
children: [
Container(
constraints: BoxConstraints(
maxHeight: height * 0.4, maxWidth: width * 0.25),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(width * 0.01)),
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: width * 0.04),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
data,
style:
TextStyle(color: coloreScuro, fontSize: width * 0.035),
),
Text(
titolo,
style: TextStyle(
color: coloreScuro,
fontWeight: FontWeight.bold,
fontSize: width * 0.035,
),
),
Text(
sottotitolo,
style: TextStyle(
color: coloreScuro,
fontWeight: FontWeight.bold,
fontSize: width * 0.035,
),
),
],
),
),
Expanded(
child: SizedBox(
width: width * 0.1,
),
),
IconButton(
onPressed: () {
debugPrint('puntini premuti');
},
icon: Icon(
Icons.favorite_outline,
size: width * 0.06,
color: coloreScuro,
))
],
),
),
);
}
}
Это вызывает переполнение, когда какая-либо строка в текстовых виджетах слишком длинная:
Я хочу иметь что-то вроде этого:
Итак, я бы хотел, чтобы текст внутри текстового виджета автоматически переходил на следующую строку, если в строке недостаточно места.
Знаете ли вы, как решить проблему? Я уже пытался поместить текстовый виджет в гибкий или расширенный виджет, но это не сработало.
Он не переходит на следующую строку, потому что не знает размера, поэтому вам придется обернуть столбец расширенным и удалить отступы, а расширенный размер. Ваш код будет выглядеть так
class MyEventCard extends StatelessWidget {
const MyEventCard({
super.key,
required this.height,
required this.width,
required this.coloreChiaroSfondo,
required this.coloreScuro,
required this.data,
required this.image,
required this.sottotitolo,
required this.titolo,
});
final double height;
final double width;
final Color coloreChiaroSfondo;
final Color coloreScuro;
final String image;
final String data;
final String titolo;
final String sottotitolo;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
margin: EdgeInsets.symmetric(vertical: height * 0.005),
padding: EdgeInsets.symmetric(
horizontal: width * 0.02, vertical: width * 0.02),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(width * 0.02)),
color: coloreChiaroSfondo,
border: Border.all(
color: coloreScuro, // Colore del bordo
width: width * 0.001, // Larghezza del bordo
),
),
child: Row(
children: [
Container(
constraints: BoxConstraints(
maxHeight: height * 0.4, maxWidth: width * 0.25),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(width * 0.01)),
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
),
Expanded(
child : Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
data,
style:
TextStyle(color: coloreScuro, fontSize: width * 0.035),
),
Text(
titolo,
style: TextStyle(
color: coloreScuro,
fontWeight: FontWeight.bold,
fontSize: width * 0.035,
),
),
Text(
sottotitolo,
style: TextStyle(
color: coloreScuro,
fontWeight: FontWeight.bold,
fontSize: width * 0.035,
),
),
],
),
),
IconButton(
onPressed: () {
debugPrint('puntini premuti');
},
icon: Icon(
Icons.favorite_outline,
size: width * 0.06,
color: coloreScuro,
))
],
),
),
);
}
}
Отредактируйте, добавьте дополнительные объяснения с помощью инспектора виджетов, как вы видите на рисунке ниже, ширина текстовой области постоянна, теперь, когда текстовая строка длиннее ширины, она переходит на следующую строку.
Большое спасибо! Это то, что я искал.
@GeremiaMoretti Я отредактировал ответ, чтобы получить больше объяснений, проверьте его, чтобы понять, почему оно переполняется и как его предотвратить, надеюсь, это поможет
Это очень помогло. Спасибо, не за разъяснения
Оберните текстовый виджет виджетом SizedBox, чтобы текст перешел на следующую строку.
В некоторых случаях это по-прежнему вызывало переполнение
Expanded
должен быть родителем дляPadding > Column
, а неSizedBox