Question

我有一个带有后缀图标的TextFormField，它用作IconButton：

TextFormField(
  autocorrect: false,
  decoration: InputDecoration(
    prefixIcon: widget.icon,
    isDense: true,
    suffixIcon: IconButton(
      icon: Icon(Icons.clear),
      onPressed: () {...}                 
    )
  ),     
  controller: _controller,
  maxLines: null,
)

我的问题是，后缀图标增加了文本字段的高度：

（此外，文本结尾和图标之间还有太多空间）：

我尝试了不同的方法来避免这种情况，但是几乎所有方法都失败了。最后，我在这里找到了可能的解决方案：https://github.com/flutter/flutter/issues/21908#issuecomment-516434465

因此，我尝试使用如上所述的IntrinsicHeight小部件：

IntrinsicHeight(
  child: TextFormField(...)
)

实际上，它使我的TextFormField的高度正常化，但是现在出现了自动换行/换行符的情况：

如您所见，多行调整不再正常工作，几乎取决于何时扩展。

所以：您是否知道如何解决带有后缀图标和由此产生的文本字段高度的最初问题？还是现在使用IntrisicHeight时如何解决多行问题？

Answer 1

您可以在下面复制粘贴运行完整代码
步骤1：您可以使用suffixIconConstraints减少填充https://github.com/flutter/flutter/pull/50058
步骤2：使用InkWell包装Icon并设置Icon大小

TextFormField(
                autocorrect: false,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.add),
                    prefixIconConstraints: BoxConstraints(
                      minWidth: 5,
                      minHeight: 5,
                    ),
                    isDense: true,
                    suffixIconConstraints: BoxConstraints(
                      minWidth: 2,
                      minHeight: 2,
                    ),
                    suffixIcon: InkWell(
                        child: Icon(Icons.clear, size: 14), onTap: () {})),
                controller: _controller1,
                maxLines: null,
              ),

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController myController1 = TextEditingController();
  TextEditingController _controller1 = TextEditingController();
  TextEditingController _controller2 = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: TextFormField(
                autocorrect: false,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.add),
                    prefixIconConstraints: BoxConstraints(
                      minWidth: 5,
                      minHeight: 5,
                    ),
                    isDense: true,
                    suffixIconConstraints: BoxConstraints(
                      minWidth: 2,
                      minHeight: 2,
                    ),
                    suffixIcon: InkWell(
                        child: Icon(Icons.clear, size: 14), onTap: () {})),
                controller: _controller1,
                maxLines: null,
              ),
            ),
            Expanded(
              child: TextFormField(
                autocorrect: false,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.add),
                    prefixIconConstraints: BoxConstraints(
                      minWidth: 5,
                      minHeight: 5,
                    ),
                    isDense: true,
                    suffixIconConstraints: BoxConstraints(
                      minWidth: 2,
                      minHeight: 2,
                    ),
                    suffixIcon: InkWell(
                        child: Icon(Icons.clear, size: 14), onTap: () {})),
                controller: _controller2,
                maxLines: null,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

TextFormField后缀图标出现问题

1 个答案: