无涯教程网

在 Flutter 中，如何使用文本字段和方形图像进行行布局

发布于10月25日

我正在努力实现以下布局inside a row(请参见附图):

文本字段，有3行
正方形图像容器(纵横比为1:1)，其中图像具有封面大小

Constraints: I want the TextField to set the height of the row, so no matter how big or small the font size, the image will always be square, and its height the same as the TextField height.
So I don't want to use any pixel sizes

This is my initial code, but of course the image is not constrained...
Any ideas on how to fix that?

IntrinsicHeight(
  child: Row(
    children: [
      Flexible(
        child: TextField(
          controller: _controller,
          maxLines: 3,
        ),
      ),
      Image.file(File(imagePath), fit: BoxFit.cover)
    ],
  ),
)

推荐答案

试试这个:

IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Flexible(
            child: TextField(
              controller: _controller,
              maxLines: 3,
            ),
          ),
          AspectRatio(
            aspectRatio: 1,
            child: Image.file(File(imagePath), fit: BoxFit.cover, width: 0),
          ),
        ],
      ),
    );

Flutter相关问答推荐

为什么要在值列表中两次放入空安全性

如何防止onTapCancel由子元素触发？

在Flutter 中更改扩展瓷砖的高度

有没有方法可以从当前时间轻松计算TimeStamp？

如何处理平台游戏的对象冲突？

在 Flutter 中滑动关闭 PageView.builder 时出现问题

Flutter：我的应用程序是否需要包含退款购买？

即使小部件比Flutter 中的屏幕更宽，也始终显示滚动条

如果其他Provider 的帐户已存在，如何阻止用户登录？

如何将取消图标放置在右上角

用户文档 ID 与 Firestore 中的用户 ID 相同

从所有设备注销，因为用户帐户已从 firebase flutter 中删除

Flutter 自定义对齐

在 flutter 中获取最喜欢的文档

我的第一个 flutter 项目出错，启动时为空值？

alert 对话框内的 ListView 显示空的透明窗口

如何将 void 函数放入单独的 dart 文件的单独页面中

Flutter - 使用 pin 进行身份验证

Flutter：如何判断嵌套列表是否包含值

如何制作两个显示相关内容且可编辑的文本字段？

实用课程推荐

相关教程推荐