当键盘出现时,顶部的 TextField 会离开屏幕

时间:2021-07-08 11:20:51

标签: android flutter dart

我正在处理一个有多个 TextFields 的屏幕,我用 TextFields 将所有 SingleChildScrollView 包裹起来,这样键盘就不会覆盖底部的文本字段出现。

注意:textbr 是一个返回 TextField 的函数。

SingleChildScrollView(
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Container(
                                  padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
                                  width: 170,
                                  child: textbr(
                                      indectext(
                                          Icons.person,
                                          Colors.redAccent,
                                          25,
                                          'First Name',
                                          ''),
                                      TextInputType.name,
                                      17)),
                              Container(
                                  padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
                                  width: 170,
                                  child: textbr(
                                      indectext(
                                          Icons.person,
                                          Colors.redAccent,
                                          25,
                                          'Last Name',
                                          ''),
                                      TextInputType.name,
                                      17))
                            ],
                          ),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
                              child: textbr(
                                  indectext(Icons.phone, Colors.redAccent,
                                      25, 'Phone Number', ''),
                                  TextInputType.phone,
                                  18)),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
                              child: textbr(
                                  indectext(Icons.alternate_email,
                                      Colors.redAccent, 25, 'E-mail', ''),
                                  TextInputType.emailAddress,
                                  30)),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
                              child: textbr(
                                  indectext(
                                      Icons.location_on,
                                      Colors.redAccent,
                                      25,
                                      'Address 1',
                                      ''),
                                  TextInputType.text,
                                  60)),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 10),
                              child: textbr(
                                  indectext(
                                      Icons.location_on,
                                      Colors.redAccent,
                                      25,
                                      'Address 2',
                                      ''),
                                  TextInputType.text,
                                  18)),
                          // Container(padding: EdgeInsets.fromLTRB(16, 0,16,7),child:textbr(indectext(Icons.phone,Colors.redAccent,25,'Phone Number',''), TextInputType.phone, 18))
                        ],
                      ),
                    )

See the image here 但这导致了顶部文本字段的另一个问题,当我单击顶部的文本字段之一时,键盘出现并向下滚动到底部,我看不到我正在输入的内容该文本字段,因为它由于滚动而从屏幕上消失了.. See the image here

如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

我有两种解决方案 1 如果它不起作用,则使用 SafeArea 小部件而不是尝试传递具有属性 crossAxisAlignment: CrossAxisAlignment.start, 的列