Flutter TextField 的高度问题

示例


先来看一个例子:假设我们要做一个表单,左边是提示文字,右边是输入框

给出代码:

Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          "$labelName",
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        Expanded(
          child: TextField(
            obscureText: true,
            style: TextStyle(
              fontSize: 16,
            ),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: "$hintText",
            ),
          ),
        )
      ],
    )

可以看到 输入框的高度显然有点太高了 😐

问题解决


TextFieldInputDecoration 填加 isDense 属性:

...
decoration: InputDecoration(
  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
  border: OutlineInputBorder(),
  hintText: "$hintText",
  isDense: true,
),
...

完成后就可以通过调节 contentPadding 的大小来设置输入框的内边距了 😎

posted @   HuStoking  阅读(1085)  评论(0编辑  收藏  举报
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· 从 Windows Forms 到微服务的经验教训
点击右上角即可分享
微信分享提示