Flutter - TextFormField 扩展无法正常工作

Question

我正在尝试创建自己的 TextFieldForm 以通过特定设计在我的应用程序中使用，如果是这种情况，我在扩展它时遇到了一些麻烦。

目前看起来是这样的：

但实际上应该是这样的：

据我了解，为了做到这一点，我应该将 expands 参数设置为 TRUE 和 ma​​xLines 与 minLines 到 NULL。

应该是这样的：

expands: this.expand,
minLines: this.expand ? null : 1,
maxLines: this.expand ? null : 1,

问题是我遇到了一个有趣的错误：

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderCustomPaint's layout() function by the following
function, which probably computed the invalid constraints in question:
  _RenderDecoration.performLayout (package:flutter/src/material/input_decorator.dart:1298:17)
The offending constraints were:
  BoxConstraints(w=289.8, h=Infinity)

我提交的自定义文本表单代码：

class CustomTextField extends StatelessWidget {
  final String text;
  final String helperText;
  final double primaryFontSize;
  final double secondaryFontSize;
  final bool isPassword;
  final String Function(String) validator;
  final TextInputType keyboardType;
  final bool expand;

  String capitalize(String s) => s[0].toUpperCase() + s.substring(1);

  const CustomTextField({
    @required this.text,
    this.primaryFontSize = 20,
    this.secondaryFontSize = 16,
    this.isPassword = false,
    this.validator,
    this.keyboardType = TextInputType.text,
    this.helperText,
    this.expand = false,
  });

  @override
  Widget build(BuildContext context) {
    String _helperText = this.helperText ?? this.text;

    return Column(children: [
      TextFormField(


        expands: this.expand,
        minLines: this.expand ? null : 1,
        maxLines: this.expand ? null : 1,


        keyboardType: keyboardType,
        validator: validator,
        obscureText: isPassword,
        decoration: InputDecoration(
          errorStyle: TextStyle(
              fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
          border: InputBorder.none,
          hintText: capitalize(text),
          hintStyle: TextStyle(color: AppColor.fontColor),
        ),
        style: new TextStyle(
            fontSize: primaryFontSize,
            color: AppColor.fontColor,
            fontWeight: FontWeight.bold),
      ),
      Row(
        children: [
          Expanded(
              flex: 1,
              child: Divider(
                color: AppColor.grayOutFontColor,
                thickness: 2,
              )),
          SizedBox(width: 10),
          Text(
            _helperText,
            style: new TextStyle(
                fontSize: secondaryFontSize,
                color: AppColor.grayOutFontColor,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 10),
          Expanded(
              flex: 9,
              child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      )
    ]);
  }
}

自定义文本表单域的USED：

CustomTextField(
  expand: true,
  text:
      "British chef, restaurateur, write, television, personality, food city, and former footballer."
      "Born in Johnston, Scotland.",
  primaryFontSize: correctPrimaryFontSize * 0.8,
  secondaryFontSize: correctSecondaryFontSize,
  helperText: "about you",
  keyboardType: TextInputType.multiline,
),

你们中的任何人都可以向我解释我做错了什么吗？或者我不明白它在做什么扩展？

Answer 1

将maxLines 属性设置为空。

import 'package:flutter/material.dart';

class CustomTextField extends StatelessWidget {
  final String text;
  final String helperText;
  final double primaryFontSize;
  final double secondaryFontSize;
  final bool isPassword;
  final String Function(String) validator;
  final TextInputType keyboardType;

  String capitalize(String s) => s[0].toUpperCase() + s.substring(1);

  const CustomTextField({
    @required this.text,
    this.primaryFontSize = 20,
    this.secondaryFontSize = 16,
    this.isPassword = false,
    this.validator,
    this.keyboardType = TextInputType.text,
    this.helperText
  });

  @override
  Widget build(BuildContext context) {
    String _helperText = this.helperText ?? this.text;

    return Column(children: [
      TextFormField(
        minLines: null,
        maxLines: null,
        keyboardType: keyboardType,
        validator: validator,
        obscureText: isPassword,
        decoration: InputDecoration(
          errorStyle: TextStyle(
              fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
          border: InputBorder.none,
          hintText: capitalize(text),
          hintStyle: TextStyle(color: Colors.green),
        ),
        style: new TextStyle(
            fontSize: primaryFontSize,
            color: Colors.green,
            fontWeight: FontWeight.bold),
      ),
      Row(
        children: [
          Expanded(
              flex: 1,
              child: Divider(
                color: Colors.grey,
                thickness: 2,
              )),
          SizedBox(width: 10),
          Text(
            _helperText,
            style: new TextStyle(
                fontSize: secondaryFontSize,
                color: Colors.grey,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 10),
          Expanded(
              flex: 9,
              child: Divider(color: Colors.grey, thickness: 2)),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      )
    ]);
  }
}

像这样使用自定义文本字段：

 CustomTextField(
    text: "",
    helperText: "about you",
    keyboardType: TextInputType.multiline,
 ),

Answer 2

我通过添加一个名为“expand”的参数找到了我的问题的答案，我正在检查该参数是否为真我会这样做

minLines: null,
maxLines: !this.expand ? 1 : null,
maxLength: !this.expand ? null : 200,

完整的代码是：

import 'package:flutter/material.dart';
import 'package:FlutterApp_V2/apps_color/apps_color.dart';

class CustomTextField extends StatelessWidget {
  final String text;
  final String helperText;
  final double primaryFontSize;
  final double secondaryFontSize;
  final bool isPassword;
  final String Function(String) validator;
  final TextInputType keyboardType;

  final bool expand;

  String capitalize(String s) => s[0].toUpperCase() + s.substring(1);

  const CustomTextField({
    @required this.text,
    this.primaryFontSize = 20,
    this.secondaryFontSize = 16,
    this.isPassword = false,
    this.validator,
    this.keyboardType = TextInputType.text,
    this.helperText,
    this.expand = false,
  });

  @override
  Widget build(BuildContext context) {
    String _helperText = this.helperText ?? this.text;

    return Column(children: [
      TextFormField(
        minLines: null,
        maxLines: !this.expand ? 1 : null,
        maxLength: !this.expand ? null : 200,

        keyboardType: keyboardType,
        validator: validator,
        obscureText: isPassword,
        decoration: InputDecoration(
          errorStyle: TextStyle(
              fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
          border: InputBorder.none,
          hintText: capitalize(text),
          hintStyle: TextStyle(color: AppColor.fontColor),
        ),
        style: new TextStyle(
            fontSize: primaryFontSize,
            color: AppColor.fontColor,
            fontWeight: FontWeight.bold),
      ),
      Row(
        children: [
          Expanded(
              flex: 1,
              child: Divider(
                color: AppColor.grayOutFontColor,
                thickness: 2,
              )),
          SizedBox(width: 10),
          Text(
            _helperText,
            style: new TextStyle(
                fontSize: secondaryFontSize,
                color: AppColor.grayOutFontColor,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 10),
          Expanded(
              flex: 9,
              child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      )
    ]);
  }
}

Answer 3

只分配

maxLines:null,
expands:true