创建新行时如何保持 TextFormField 边框的高度答案

【问题标题】：How to maintain the height of a TextFormField border when new line is created创建新行时如何保持 TextFormField 边框的高度
【发布时间】：2021-05-21 03:40:06
【问题描述】：

Container(
          padding: EdgeInsets.only(bottom: 150),
          margin: EdgeInsets.all(10),
          decoration: BoxDecoration(
              border: Border.all(width: 2, color: Colors.black),
              borderRadius: BorderRadius.all(Radius.circular(10))),
          child: TextFormField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
                fontFamily: 'Montserrat'),
            decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Task Description...',
                hintStyle: TextStyle(
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w400,
                    fontStyle: FontStyle.italic,
                    fontSize: 20)),
          ),
        )

所以，我事先使用 Container 和 Text 小部件进行布局，然后将其更改为 TextFormField，但我真的想坚持使用 Container 的边框。但是我在输入新行时遇到了这个问题，边框/框会自动调整其高度。我不想这样，有什么办法可以解决这个问题吗？

谢谢。

【问题讨论】：

标签： flutter flutter-layout textformfield

【解决方案1】：

将 maxLines 设置为 null

Container(
      padding: EdgeInsets.only(bottom: 150),
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(width: 2, color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: TextFormField(
        keyboardType: TextInputType.multiline,
        maxLines: null,
        style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat'),
        decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Task Description...',
            hintStyle: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.italic,
                fontSize: 20)),
      ),
    )

【讨论】：

【解决方案2】：

将minLines 和maxLines 定义为相同：

完整源代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.all(10),
        decoration: BoxDecoration(
          border: Border.all(width: 2, color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        child: TextFormField(
          keyboardType: TextInputType.multiline,
          minLines: 5,
          maxLines: 5,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
          ),
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Task Description...',
            hintStyle: TextStyle(
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.italic,
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

这是我一直在寻找的答案。非常感谢，成功了！

【解决方案3】：

试试maxLines: null, 所以不需要给定大小它会根据内容自动调整大小

【讨论】：