为什么文本小部件不转到下一行？

Question

我有这个自定义小部件

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,
                ))
          ],
        ),
      ),
    );
  }
}

当文本小部件中的某些字符串太长时，会导致溢出：

我想要的是这样的：

因此，如果行中没有足够的空间，我希望文本小部件内的文本自动转到下一行。

你知道如何解决这个问题吗？ 我已经尝试将文本小部件放入灵活或扩展小部件中，但它不起作用。

Answer 1

它不会进入下一行，因为它不知道大小，所以你必须用 Expanded 包裹列并删除填充和扩展的 sizedBox 你的代码将如下所示

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,
                ))
          ],
        ),
      ),
    );
  }
}