Flutter:如何在TextField旁边显示自动完成建议?

ddhy6vgd  于 2023-05-30  发布在  Flutter
关注(0)|答案(1)|浏览(199)

我正在尝试创建一个包含建议文本的文本字段,类似于以下内容:

@ gmail.com这是一个建议,为用户自动完成的话,但我不能把文字旁边的书面文本。
我尝试使用IntrinsicWidth,但它将文本字段缩小为0,并且标签无法正确显示。

因此,我希望将建议放在书面文本旁边,但不影响正确显示标签。

ttisahbt

ttisahbt1#

你可以试试这个代码,它对我很有效

final _editingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            TextField(
              controller: _editingController,
              onChanged: (text){
                setState(() {
                });
              },
            ),
            Positioned(
              left: boundingTextSize(
                _editingController.text,
                TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.normal,
                )
              ).width,
              child: Visibility(
                visible: _editingController.text.isNotEmpty,
                child: Text("@gmail.com")
              ),
            ),
          ],
        ),
      ),
    );
  }

  static Size boundingTextSize(String text, TextStyle style,  {int maxLines = 2^31, double maxWidth = double.infinity}) {
    if (text.isEmpty) {
      return Size.zero;
    }
    final TextPainter textPainter = TextPainter(
        textDirection: TextDirection.ltr,
        text: TextSpan(text: text, style: style), maxLines: maxLines)
      ..layout(maxWidth: maxWidth);
    return textPainter.size;
  }

使用boundingTextSize测量TextField文本大小,并在TextField文本更改时更改建议文本的位置。

相关问题