如何在对话框中将 SingleChildScrollView 滚动到 TextField 焦点

Question

我在显示警告对话框时遇到问题。我的 AlertDialog 太高（很多 TextFields）。当我单击 TextFields 下方的任何内容时，键盘会使对话框变短，并且 SingleChildScrollView（我将内容包装在其中）不会滚动到具有焦点的 TextField。但是，当我在该文本字段上键入一个字符时，SingleChildScrollView 工作正常，会自动滚动到该 TextField。那么，当用户第一次点击（有焦点）时，SingleChildScrollView 如何滚动到 TextField。 p/s：我尝试在 FocusNode 中添加一个监听器，但它不起作用。

例如：我将单击“全名”字段（图 1），键盘使对话框变短，我看不到“全名”字段（图 2）。当我输入一个字符时，滚动视图会正确滚动到该字符（图 3）。

@override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(
        'Dialog Title',
        textAlign: TextAlign.center,
      ),
      titleTextStyle: TextStyle(
        fontSize: 16.0,
        color: Theme.of(context).textTheme.title.color,
        fontWeight: FontWeight.w800,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
      actions: <Widget>[
        FlatButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Cancel'.toUpperCase()),
        ),
        FlatButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('OK'.toUpperCase()),
        ),
      ],
      content: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            TextField(
              focusNode: _nodePhone,
              maxLength: 10,
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(
                labelText: 'Phone number',
              ),
              textInputAction: TextInputAction.next,
              onEditingComplete: () {
                FocusScope.of(context).requestFocus(_nodeEmail);
              },
            ),
            TextField(
              focusNode: _nodeEmail,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                labelText: 'Email',
              ),
              textInputAction: TextInputAction.next,
              onEditingComplete: () {
                FocusScope.of(context).requestFocus(_nodeFullname);
              },
            ),
            TextField(
              focusNode: _nodeFullname,
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                labelText: 'Fullname',
              ),
              textInputAction: TextInputAction.next,
              onEditingComplete: () {
                FocusScope.of(context).requestFocus(_nodePassword);
              },
            ),
            TextField(
              focusNode: _nodePassword,
              obscureText: true,
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              textInputAction: TextInputAction.done,
            ),
          ],
        ),
      ),
    );
  }

Answer 1

我也有这个问题，我设法通过给 SingleChildScrollView 一个控制器然后在 TextField 上的 onTap 来解决它。等待几毫秒让对话框折叠然后滚动到对话框的末尾

这里是一些示例代码

//declare first
ScrollController _scrollController = ScrollController();

//your field code
SingleChildScrollView(
    // give a controller
    controller: _scrollController,
    child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: < Widget > [
            TextField(
                focusNode: _nodePhone,
                maxLength: 10,
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(
                    labelText: 'Phone number',
                ),
                textInputAction: TextInputAction.next,
                onEditingComplete: () {
                    FocusScope.of(context).requestFocus(_nodeEmail);
                },
            ),
            //suppose this is your very last textfield
            TextField(
                focusNode: _nodeEmail,
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                    labelText: 'Email',
                ),
                textInputAction: TextInputAction.next,
                onEditingComplete: () {
                    FocusScope.of(context).requestFocus(_nodeFullname);
                },
                onTap: () {
                    Future.delayed(Duration(milliseconds: 500), () {
                        _scrollController.animateTo(
                            _scrollController.position.maxScrollExtent,
                            duration: Duration(milliseconds: 200),
                            curve: Curves.ease);
                    });
                },
            ),
        ]
    )
);