如何使容器根据其TextFormField子部件自动调整大小?

huangapple go评论150阅读模式
英文:

How to make a container auto adjust its size according to its TextFormField child widget?

问题

我是你的中文翻译。以下是翻译好的部分:

"我是新手使用Flutter,正在学习关于TextFormFields。我已经制作了一个应用程序,在其中有一个带有一些背景的多行文本字段的容器。我希望当用户换行时增加容器的大小。我如何使容器的高度具有灵活性?或者我如何知道用户何时在formTextField中换行?以下是代码:

import 'package:flutter/material.dart';

class MultiLineTextField extends StatefulWidget {
  const MultiLineTextField({super.key});

  @override
  State<MultiLineTextField> createState() => _MultiLineTextFieldState();
}

class _MultiLineTextFieldState extends State<MultiLineTextField> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SingleChildScrollView(
        child: Column(
          children: [
            //其他小部件
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 20),
              color: const Color.fromARGB(47, 255, 255, 255),
              height: 75,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: TextFormField(
                  autovalidateMode: AutovalidateMode.always,
                  maxLines: null,
                  cursorHeight: 17,
                  cursorColor: Colors.white,
                  decoration: const InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    icon: Icon(Icons.location_on),
                    counterText: '',
                    labelText: 'Address',
                    labelStyle: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  validator: (value) {},
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

这个小部件的父级是scaffold -> materialapp。

我在模拟器上运行这段代码。"

英文:

I'm new to flutter and am learning about TextFormFields. I have made an app that has a multiple line text field inside a container with some background. I want to increase the size of the container when user goes to the next line. How can I make the height of the container flexible? Or can I know when the user goes to the next line inside formTextField? Here's the code:

import &#39;package:flutter/material.dart&#39;;

class MultiLineTextField extends StatefulWidget {
  const MultiLineTextField({super.key});

  @override
  State&lt;MultiLineTextField&gt; createState() =&gt; _MultiLineTextFieldState();
}

class _MultiLineTextFieldState extends State&lt;MultiLineTextField&gt; {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SingleChildScrollView(
        child: Column(
          children: [
            //Other widgets
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 20),
              color: const Color.fromARGB(47, 255, 255, 255),
              height: 75,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: TextFormField(
                  autovalidateMode: AutovalidateMode.always,
                  maxLines: null,
                  cursorHeight: 17,
                  cursorColor: Colors.white,
                  decoration: const InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    icon: Icon(Icons.location_on),
                    counterText: &#39;&#39;,
                    labelText: &#39;Address&#39;,
                    labelStyle: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  validator: (value) {},
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

The parent of this widget is scaffold -> materialapp.

I am running the code on simulator.

答案1

得分: 2

像Wai Han Ko回答你的帖子一样,通过指定高度来限制容器的高度为75。你需要移除它以防止它强制设置高度。如果你添加了它以确保最小高度,你可以使用ConstrainedBox和BoxConstraints,设置最小高度为75。

英文:

Like Wai Han Ko answered to your post, you're limiting the container to be of height 75 by specifying a height. You will need to remove that to prevent it forcing that height. If you added it so there's a minimum height you could use ConstrainedBox with BoxConstraints and a min height of 75.

huangapple
  • 本文由 发表于 2023年6月8日 15:39:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76429618.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定