Flutter-当文本溢出输入时,Textformfield无法正常工作

时间:2020-03-22 00:35:42

标签: flutter

我需要输入一行,但是用户可以输入很多字符...输入的文本超出尺寸时,文本消失,如下所示:

enter image description here

代替保持同一行,而是让我在评论中向左或向右滚动

Row(children: [
    Expanded(
      flex: 8,
      child: TextFormField(
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(20.0),
          filled: true,
          fillColor: Theme.of(context).scaffoldBackgroundColor,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30.0),
              bottomLeft: Radius.circular(30.0),
            ),
            borderSide: BorderSide(
              width: 0,
              style: BorderStyle.none,
            ),
          ),
          labelText: 'Type your comment',
          labelStyle: TextStyle(color: Colors.grey),
        ),
        inputFormatters: [
          LengthLimitingTextInputFormatter(102),
        ],
      ),
    ),
    Expanded(
      flex: 3,
      child: RaisedButton(
        color: Colors.green,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(30.0),
              bottomRight: Radius.circular(30.0)),
        ),
        child: Text(
          'Comment',
          style: Theme.of(context)
              .textTheme
              .caption
              .copyWith(fontSize: 9, color: Theme.of(context).buttonColor),
        ),
        onPressed: () {},
      ),
    )
  ]),

2 个答案:

答案 0 :(得分:0)

您可以将textField包装在容器中,还可以将max和min行设置为“ 1”作为textField内部的属性。
这对我有用:)

答案 1 :(得分:0)

改用 TextformField 并用内容填充字段

    InputDecorationTheme inputDecorationTheme() {

      OutlineInputBorder outlineInputBorder = OutlineInputBorder(
            borderRadius: BorderRadius.circular(35),
            borderSide: BorderSide(color: Color(0xff0D3552)),
            gapPadding: 10,
      );
      return InputDecorationTheme(    
        floatingLabelBehavior: FloatingLabelBehavior.always,
        contentPadding: EdgeInsets.all(25),
        enabledBorder: outlineInputBorder,
        focusedBorder: outlineInputBorder,
        border: outlineInputBorder,
      );
    }