AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 78939498
Accepted
Geremia Moretti
Geremia Moretti
Asked: 2024-09-02 16:10:54 +0800 CST2024-09-02 16:10:54 +0800 CST 2024-09-02 16:10:54 +0800 CST

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

  • 772

我有这个自定义小部件

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

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

我希望得到这样的结果: 正确的屏幕

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

您知道如何解决这个问题吗?我已经尝试将文本小部件放入灵活或扩展小部件中,但没有成功。

flutter
  • 2 2 个回答
  • 53 Views

2 个回答

  • Voted
  1. Best Answer
    Lightn1ng
    2024-09-02T16:27:35+08:002024-09-02T16:27:35+08:00

    它不会进入下一行,因为它不知道大小,所以你必须用 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,
                    ))
              ],
            ),
          ),
        );
      }
    }
    

    结果

    编辑通过 Widget 检查器添加更多解释,如下图所示,文本区域宽度是 const,现在当文本行长于宽度时,它将转到下一行 在此处输入图片描述

    • 1
  2. Akhil Suthapalli
    2024-09-02T16:32:05+08:002024-09-02T16:32:05+08:00

    使用 SizedBox 小部件包裹文本小部件,使文本进入下一行。

    • 0

相关问题

  • 如何扩展列表视图的子级,以便所有子级在颤振中占据最大宽度

  • 如何修复 GoRouter.of(context).pop() 以便它导航到上一页?

  • 在 flutter 中使用 sliver appbar 时状态不会改变

  • 如何请求用户访问手机存储空间?

  • 如何保证代码按正确的顺序执行?扑

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    Vue 3:创建时出错“预期标识符但发现‘导入’”[重复]

    • 1 个回答
  • Marko Smith

    为什么这个简单而小的 Java 代码在所有 Graal JVM 上的运行速度都快 30 倍,但在任何 Oracle JVM 上却不行?

    • 1 个回答
  • Marko Smith

    具有指定基础类型但没有枚举器的“枚举类”的用途是什么?

    • 1 个回答
  • Marko Smith

    如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误?

    • 6 个回答
  • Marko Smith

    `(表达式,左值) = 右值` 在 C 或 C++ 中是有效的赋值吗?为什么有些编译器会接受/拒绝它?

    • 3 个回答
  • Marko Smith

    何时应使用 std::inplace_vector 而不是 std::vector?

    • 3 个回答
  • Marko Smith

    在 C++ 中,一个不执行任何操作的空程序需要 204KB 的堆,但在 C 中则不需要

    • 1 个回答
  • Marko Smith

    PowerBI 目前与 BigQuery 不兼容:Simba 驱动程序与 Windows 更新有关

    • 2 个回答
  • Marko Smith

    AdMob:MobileAds.initialize() - 对于某些设备,“java.lang.Integer 无法转换为 java.lang.String”

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Martin Hope
    Aleksandr Dubinsky 为什么 InetAddress 上的 switch 模式匹配会失败,并出现“未涵盖所有可能的输入值”? 2024-12-23 06:56:21 +0800 CST
  • Martin Hope
    Phillip Borge 为什么这个简单而小的 Java 代码在所有 Graal JVM 上的运行速度都快 30 倍,但在任何 Oracle JVM 上却不行? 2024-12-12 20:46:46 +0800 CST
  • Martin Hope
    Oodini 具有指定基础类型但没有枚举器的“枚举类”的用途是什么? 2024-12-12 06:27:11 +0800 CST
  • Martin Hope
    sleeptightAnsiC `(表达式,左值) = 右值` 在 C 或 C++ 中是有效的赋值吗?为什么有些编译器会接受/拒绝它? 2024-11-09 07:18:53 +0800 CST
  • Martin Hope
    The Mad Gamer 何时应使用 std::inplace_vector 而不是 std::vector? 2024-10-29 23:01:00 +0800 CST
  • Martin Hope
    Chad Feller 在 5.2 版中,bash 条件语句中的 [[ .. ]] 中的分号现在是可选的吗? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench 为什么双破折号 (--) 会导致此 MariaDB 子句评估为 true? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng 为什么 `dict(id=1, **{'id': 2})` 有时会引发 `KeyError: 'id'` 而不是 TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob:MobileAds.initialize() - 对于某些设备,“java.lang.Integer 无法转换为 java.lang.String” 2024-03-20 03:12:31 +0800 CST
  • Martin Hope
    MarkB 为什么 GCC 生成有条件执行 SIMD 实现的代码? 2024-02-17 06:17:14 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve