颤振键盘隐藏嵌套列表视图中的文本字段

Posted 2023-02-23

【中文标题】颤振键盘隐藏嵌套列表视图中的文本字段

【英文标题】：Flutter Keyboard hide textField in nested Listviews

【发布时间】：2021-11-23 01:19:47

【问题描述】：

我正在使用具有响应式布局的 Flutter 制作一个跨平台应用程序。我将使用登录页面布局来描述问题。布局分为 3 个小部件（桌面、平板电脑、移动设备），每个小部件都有一个 ListView 及其图形组件、图像、文本等......在这个 ListView 内，3 个小部件共享登录表单，另一个 ListView 及其组件（文本字段, 按钮 ...)

问题：打开键盘时无法滚动覆盖它们的文本字段

以下是代码草稿：

//The form shared by the 3 Widgets
class SignInFrom extends StatelessWidget 
  const SignInFrom(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Form(
      child: ListView(
        shrinkWrap: true,
        physics: const ClampingScrollPhysics(),
        children: [
          //COMPONENTS
        ],
      ),
    );
  
 

这是 3 个小部件之一（移动）：

class SignInPageMobile extends StatelessWidget 
  const SignInPageMobile(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return SafeArea(
      child: ListView(
        children: [

          /* COMPONENTS
           *  ...
           */

          const SignInForm(), //The above SignInFrom widget
        ],
      ),
    );
  

SignInPage 小部件：

class SignInPage extends StatelessWidget 
  const SignInPage(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: BlocProvider(
        create: (context) => getIt<SignInFormBloc>(),
        child: Responsive(
          mobile: SignInPageMobile(),
          tablet: SignInPageTablet(),
          desktop: SignInPageDesktop(),
        ),
      ),
    );
  

编辑

我想提一下，在 Scaffold 中将包含它设置的 3 个小部件之一： resizeToAvoidBottomInset: false

因为我的组件是基于支架尺寸使用flutter_screenutil的动态高度和宽度值构建的，所以即使在键盘打开时它也需要保持其尺寸

【参考方案1】：

EditText,RoundedButton这两个是我的自定义类

SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
               
                EditText('email', false, Icons.alternate_email, (data) ,
                    getLoginController.loginEmailController),
                Divider(
                  color: Colors.black,
                  thickness: 1,
                ),
                EditText('password', true, Icons.lock_outlined, (data) ,
                    getLoginController.loginPasswordController),
                Divider(
                  color: Colors.black,
                  thickness: 1,
                ),
                SizedBox(height: 10),
                RoundedButton('Login', () async 
                  //button  ),
              
              ],
            ),
          )

【讨论】：

我已经尝试过了，但它不起作用。我应该包装外部清单还是内部清单？

检查编辑我已经实现了这样

它看起来不起作用。你能把你写的代码包装在另一个 ListView 中，重现和我一样的情况吗？