根据文本字段值动态更改容器大小

Posted 2023-02-23

【中文标题】根据文本字段值动态更改容器大小

【英文标题】：Dynamically change container size depending on textfield value

【发布时间】：2022-01-18 09:40:57

【问题描述】：

在 todoScreen 中，有一个容器包含一个包含两个文本字段的列，我希望容器随着第二个文本字段中字符数的增加而动态变化，但容器只是扩展到底部。我该如何解决？

Scaffold(
  body: SafeArea(
    child: Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
      child: Container(
          decoration: BoxDecoration(
              color: Color(0xFF414141),
              boxShadow: const [
                BoxShadow(
                  color: Color(0xFF414141),
                  offset: Offset(2.5, 2.5),
                  blurRadius: 5.0,
                  spreadRadius: 1.0,
                ), //B
              ],
              borderRadius: BorderRadius.circular(14.0)),
          padding:
              const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
          child: Column(
            children: [
              TextField(
                controller: titleEditingController,
                autofocus: true,
                autocorrect: false,
                cursorColor: Colors.grey,
                maxLines: 1,
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(
                    hintText: "Title", border: InputBorder.none),
                style: GoogleFonts.notoSans(
                    color: Color(0xFFA8A8A8), fontSize: 20.0),
              ),
              const Divider(
                color: Color(0xFF707070),
              ),
              TextField(
                controller: detailEditingController,
                maxLines: null,
                autocorrect: false,
                cursorColor: Colors.grey,
                textInputAction: TextInputAction.done,
                decoration: const InputDecoration(
                    hintText: "Notes", border: InputBorder.none),
                style: GoogleFonts.notoSans(
                    color: Color(0xFFA8A8A8), fontSize: 20.0),
              ),
            ],
          )),
    ),
  ),
);

【参考方案1】：

-> 使用此代码解决问题

例如：

body: SafeArea(
          child: SingleChildScrollView(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
              child: Container(
                  decoration: BoxDecoration(
                      color: Color(0xFF414141),
                      boxShadow: const [
                        BoxShadow(
                          color: Color(0xFF414141),
                          offset: Offset(2.5, 2.5),
                          blurRadius: 5.0,
                          spreadRadius: 1.0,
                        ), //B
                      ],
                      borderRadius: BorderRadius.circular(14.0)),
                  padding:
                  const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      TextField(
                        controller: titleEditingController,
                        autofocus: true,
                        autocorrect: false,
                        cursorColor: Colors.grey,
                        maxLines: 1,
                        textInputAction: TextInputAction.next,
                        decoration: const InputDecoration(
                            hintText: "Title", border: InputBorder.none),
                        style: TextStyle(
                            color: Color(0xFFA8A8A8), fontSize: 20.0),
                      ),
                      const Divider(
                        color: Color(0xFF707070),
                      ),
                      TextField(
                        controller: detailEditingController,
                        maxLines: null,
                        autocorrect: false,
                        cursorColor: Colors.grey,
                        textInputAction: TextInputAction.done,
                        decoration: const InputDecoration(
                            hintText: "Notes", border: InputBorder.none),
                        style:TextStyle(
                            color: Color(0xFFA8A8A8), fontSize: 20.0),
                      ),
                    ],
                  )),
            ),
          ),
        ),

【讨论】：

MainAxisSize.max 无效，但 min 有效。