首页 > 解决方案 > 仅当聚焦于颤动时,如何在 TextFormField() 上显示计数器文本?

问题描述

我有TextFormField()小部件,我想显示 CounterText 但仅在该字段集中时

还有一个侧面问题如何在焦点上更改字段背景颜色?

在此处输入图像描述

代码:-

TextFormField(
  decoration: InputDecoration(
    labelText: "Weight",
    border: OutlineInputBorder(
    borderSide: BorderSide(
    color:Colors.grey[200],
    width: 1,
    style: BorderStyle.solid
  ),
  gapPadding: 4.0
 ),
  counterText:"Enter Your Weight",
),
),

标签: formsflutter

解决方案


我认为最简单的方法是创建一个 Boolean 列表并在其上更新它们,以便您知道何时选择 TextForm 然后显示 counterText

Column(
      children: <Widget>[
        SizedBox(height: 50),
        TextFormField(
          onTap: () {
            setState(() {
              selected[0] = true;
              selected[1] = false;
            });
          },
          controller: textController,
          decoration: InputDecoration(
            labelText: "Weight",
            border: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.grey[200],
                    width: 1,
                    style: BorderStyle.solid),
                gapPadding: 4.0),
            counterText: selected[0] ? "Enter Your Weight" : ' ',
          ),
        ),
        TextFormField(
          onTap: () {
            setState(() {
              selected[0] = false;
              selected[1] = true;
            });
          },
          decoration: InputDecoration(
            labelText: "Age",
            border: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.grey[200],
                    width: 1,
                    style: BorderStyle.solid),
                gapPadding: 4.0),
            counterText: selected[1] ? "Enter Your Age" : ' ',
          ),
        )
      ],
    )

在此处输入图像描述


推荐阅读