如何在 Container 中垂直扩展 TextField 以覆盖 Flutter 中的所有可用空间

Posted 2023-02-23

【中文标题】如何在 Container 中垂直扩展 TextField 以覆盖 Flutter 中的所有可用空间

【英文标题】：How to expand TextField in Container vertically to cover all available space in Flutter

【发布时间】：2019-08-28 08:19:23

【问题描述】：

我想扩展一个TextField 以垂直覆盖所有空间，它的Container 正在扩展但TextField 没有，这是设计：

蓝色是Container 区域。但是TextField 没有扩展

这是我正在使用的代码：

Container(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("Title"),
          Container(
            margin: EdgeInsets.only(top: 8),
            child: TextField(
              controller: c_title,
              decoration: Styles.getInputFieldStyle(""),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 16),
            child: Text("Feedback"),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              margin: EdgeInsets.only(top: 8),
              child: TextField(
                decoration: Styles.getInputFieldStyle(""),
                controller: c_feedback,
                keyboardType: TextInputType.multiline,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 16),
            width: double.infinity,
            child: RaisedButton(
              onPressed: ()_onSubmitPressed();,
              child: Text("Submit"),
              textColor: Colors.white,
              color: MyColors.theme_red,
            ),
          )
        ],
      ),
    );

【参考方案1】：

你需要这个。

TextFormField(
  decoration: InputDecoration(hintText: "Enter your very long text here"),
  maxLines: double.maxFinite.floor(), 
),

编辑：这是您的最终解决方案。

Container(
  padding: EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("Title"),
      Container(
        margin: EdgeInsets.only(top: 8),
        child: TextField(
          controller: c_title,
          decoration: Styles.getInputFieldStyle(""),
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: 16),
        child: Text("Feedback"),
      ),
      Expanded(
        child: LayoutBuilder(
          builder: (_, __) 
            return Container(
              color: Colors.blue,
              margin: EdgeInsets.only(top: 8),
              child: TextField(
                decoration: Styles.getInputFieldStyle(""),
                controller: c_feedback,
                maxLines: double.maxFinite.floor(),
                keyboardType: TextInputType.multiline,
              ),
            );
          ,
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: 16),
        width: double.infinity,
        child: RaisedButton(
          onPressed: () 
            _onSubmitPressed();
          ,
          child: Text("Submit"),
          textColor: Colors.white,
          color: MyColors.theme_red,
        ),
      )
    ],
  ),
),

【讨论】：

无论底部小部件如何，它都会将 TextField 扩展到父级底部，即使下面有类似按钮的小部件

@Asad，我看了你的历史，发现你不接受别人的答案，你只是接受他们的帮助然后离开。

这看起来很奇怪，但它确实有效，谢谢，幸运的是我在底部没有按钮

【参考方案2】：

使用 Flutter 1.5.4，您可以简单地执行以下操作：

Expanded(
  child: TextField(
    expands: true,
    maxLines: null,
  ),
)

它将占据所有垂直的空闲空间。

【参考方案3】：

下面的代码可以帮助你-

使用“maxLines”和“keyboardType: TextInputType.multiline”来扩展文本字段

new Container(
                            child: TextFormField(
                              textAlign: TextAlign.start,
                              style: new TextStyle(
                                  fontSize: 14.0, color: Colors.black),
                              keyboardType: TextInputType.multiline,
                              focusNode: nodeTwo,
                              textInputAction: TextInputAction.next,
                              maxLines: 4,
                              maxLength: 200,
                              decoration: InputDecoration(
                                  labelText: 'Add Description',
                                 alignLabelWithHint: true ,
                                  hintText: 'Enter Description',
                                  hintStyle: TextStyle(fontWeight: 
                                  FontWeight.w300,fontSize: 14.0),
                                  errorStyle: TextStyle(color: Colors.redAccent),
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(5.0))),
                            )

【参考方案4】：

只需将 maxLines 设置为 null：

TextField(
  maxLines: null,               
),

【参考方案5】：

如果您的 textField 小部件是 Column 的子小部件并设置 expands: true 。

可以设置textAlignVertical: TextAlignVertical.top在顶部垂直对齐文本。