Question

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

当前看起来像这样：

但这实际上是这样的：

据我了解，为此，我应该将展开参数设置为 TRUE 和 maxLines 和 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)

我的自定义文本表单的CODE：

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,
      )
    ]);
  }
}

自定义文本表单字段的使用：

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,

Flutter-TextFormField展开无法正常工作

2 个答案: