对于TextField小部件中的长文本,如何在未聚焦后从头开始显示文本?

时间:2020-08-14 13:07:46

标签: flutter dart flutter-layout

Email TextField

上面的图像是TextField。我的电子邮件地址是“ dinesh12345678901@gmail.com”。散焦之后,我需要从头开始显示电子邮件,如下图所示。反正有什么方法可以轻松实现这一目标?

例如:参考gmail应用。

enter image description here

1 个答案:

答案 0 :(得分:1)

当您对selection失去重点时,可以在TextEditingController上设置TextField。这是一个示例:

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  TextEditingController _textEditingController = TextEditingController();
  FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 48),
          child: Column(
            children: <Widget>[
              Container(height: 16),
              TextField(
                controller: _textEditingController,
                focusNode: _focusNode,
              ),
              SizedBox(height: 36),
              FlatButton(
                onPressed: () async {
                  _textEditingController.selection =
                      TextSelection.fromPosition(TextPosition(offset: 0));
                  await Future.delayed(Duration(milliseconds: 100));
                  _focusNode.unfocus();
                },
                color: Colors.red,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                textColor: Colors.white,
                child: Text('Unfocus'),
              ),
            ],
            crossAxisAlignment: CrossAxisAlignment.stretch,
          ),
        ),
      ),
    );
  }
}

enter image description here