Question

我正在制作一个我希望用户能够使用TextFormFields输入内容的应用程序。为了简化数据存储，我创建了TextFormField类的子类：

  MyTextFormField({
    this.labelText,
    this.validator,
    this.onSaved,
    this.maxLines = 1,
    this.maxLength = 30,
});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: TextFormField(
        maxLines: maxLines,
        maxLength: maxLength,
        validator: validator,
        onSaved: onSaved,
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(25.0),
          ),
          labelText: labelText,
        ),
      ),
    );
  }
}

我将它们放在屏幕上：


Padding(
           padding: const EdgeInsets.all(8.0),
           child: Row(
             children: <Widget> [
               MyTextFormField(
                 maxLength: 20,
                 labelText: "Ingredient",
               ),
               Text("QT"),
               MyTextFormField(
                 maxLength: 6,
                 labelText: "amount",
               ),
             ],
           ),
         ),

这看起来像这样：

我希望最左边的（金额）字段显着小于最右边的（金额）字段，因为它仅应包含一个整数。我尝试使用Flexible窗口小部件，但是却无济于事，有时会给我带来很多错误，并使应用程序崩溃。有人知道如何解决这个问题吗？

Answer 1

您可以使用我下面提到的flex。

Expanded(
            flex: 4,
            child: MyTextFormField(
              maxLength: 20,
              labelText: "Ingredient",
            ),
          ),
          Text("QT"),
          Expanded(
            flex: 1,
            child: MyTextFormField(
              maxLength: 6,
              labelText: "amount",
            ),
          ),

Answer 2

您可以使用contentPadding

MyTextFormField({
    this.labelText,
    this.validator,
    this.onSaved,
    this.maxLines = 1,
    this.maxLength = 30,
    this.contentPadding = 0.0
});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: TextFormField(
        maxLines: maxLines,
        maxLength: maxLength,
        validator: validator,
        onSaved: onSaved,
        decoration: InputDecoration(
          border: OutlineInputBorder(
            contentPadding: contentPadding,
            borderRadius: BorderRadius.circular(25.0),
          ),
          labelText: labelText,
        ),
      ),
    );
  }
}

然后给TextFormField想要比您想要小的填充更大的填充。

更改TextFormField的大小

2 个答案: