Flutter TextField - textAlignVertical 不起作用答案

【问题标题】：Flutter TextField - textAlignVertical not workingFlutter TextField - textAlignVertical 不起作用
【发布时间】：2020-05-11 14:34:53
【问题描述】：

我在自定义小部件中使用 Flutter TextField，但不知何故 textAlignVertical 属性不起作用。下面是自定义小部件的代码。有谁知道这种行为来自哪里？我尝试通过将TextField 的style 参数的height 属性设置为0 来解决它，但这也无济于事。

非常感谢任何帮助！

class CustomTextField extends StatefulWidget {
  final double width;
  final double height;
  final Color color;
  final TextEditingController controller;
  final String hintText;
  final TextStyle textStyle;
  final Icon icon;
  final String errorKey;
  final Map<String, String> errors;
  final BorderRadius borderRadius;

  CustomTextField({
    this.controller, 
    this.hintText, 
    this.textStyle,
    this.icon, 
    this.errorKey, 
    this.errors, 
    this.width,
    this.height,
    this.color,
    this.borderRadius});

  @override
  _CustomTextFieldState createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  bool showClearButton = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: widget.width,
          height: 100,
          decoration: BoxDecoration(
            color: widget.color,
            borderRadius: widget.borderRadius
          ),
          child: Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 10),
                child: widget.icon,
              ),
              Expanded(
                child: TextField(
                  textAlignVertical: TextAlignVertical.center,
                  controller: widget.controller,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 8),
                    hintText: widget.hintText,
                    border: InputBorder.none,
                  ),
                  onChanged: (value) {
                    if (widget.controller.text.isNotEmpty) {
                      setState(() { showClearButton = true; });
                    } 
                  },
                  onEditingComplete: () {
                    FocusScope.of(context).unfocus(); 
                  },
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right: 8),
                child: (showClearButton || widget.controller.text.isNotEmpty) 
                  ? GestureDetector(
                      child: Icon(Icons.clear, color: BaseColors.orange,),
                      onTap: () { 
                        widget.controller.clear(); 
                        setState(() { showClearButton = false; });
                      }) 
                  : SizedBox(width: 0,),
              )
            ]
          )
        ),
        (widget.errors != null && widget.errors.containsKey(widget.errorKey)) 
          ? Container(
              alignment: Alignment.topLeft,
              child: Padding(padding: EdgeInsets.only(left: 10), child: Text(widget.errors[widget.errorKey], style: TextStyle(fontSize: 12)))
            )
          : SizedBox(height: 0),
        ]
    );
  }
}

【问题讨论】：

标签： flutter textfield

【解决方案1】：

您可以在TextField.decoration 中配置边框属性
所以你可以看到一个无边框的中心文本对齐的`TextField`

TextField(
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)
    ),
    border: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)
    ),
    contentPadding: EdgeInsets.symmetric(vertical: 0),
  ),             
  //other config            
),

【讨论】：