Flutter 中的 TextFormField 光标气泡和滚动问题

Question

滚动页面时，光标气泡会覆盖其他小部件并Appbar。你能帮帮我吗？

这个 GIF 文件显示了我的问题

小部件

class Sample extends StatefulWidget {
  Sample({Key? key}) : super(key: key);

  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      extendBodyBehindAppBar: false,
      extendBody: false,
      appBar: AppBar(
        title: Text('AppBar'),
        backgroundColor: Colors.orange,
        elevation: 0.0,
      ),
      body: SafeArea(
        child: Column(
          children: [
            ListView(
              addAutomaticKeepAlives: true,
              shrinkWrap: true,
              children: [
                Container(
                  color: Colors.yellow,
                  height: 70,
                  width: MediaQuery.of(context).size.width,
                  child: Center(
                    child: Text(
                      'This part want not be scrolled',
                      style: TextStyle(color: Colors.red),
                    ),
                  ),
                )
              ],
            ),
            Expanded(
              child: Scrollbar(
                child: ListView(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  children: [
                    Table(
                      children: [
                        TableRow(children: [
                          Column(
                            children: [Text('Name')],
                          ),
                          Column(
                            children: [
                              TextFormField(decoration: InputDecoration())
                            ],
                          )
                        ]),
                        TableRow(
                          children: [
                            Column(
                              children: [Text('Name')],
                            ),
                            Column(
                              children: [
                                TextFormField(decoration: InputDecoration())
                              ],
                            )
                          ],
                        ),
                        TableRow(
                          children: [
                            Column(
                              children: [Text('Name')],
                            ),
                            Column(
                              children: [
                                TextFormField(decoration: InputDecoration())
                              ],
                            )
                          ],
                        ),
                        TableRow(
                          children: [
                            Column(
                              children: [Text('Name')],
                            ),
                            Column(
                              children: [
                                TextFormField(decoration: InputDecoration())
                              ],
                            )
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Table 小部件是为不可滚动的 GridView 制作的。它会渲染完整的 Table 小部件树一次并使其子项保持活动状态。你可以认为它类似于 SingleChildScrollView。在您的 Table 子级中，即使它在屏幕上不可见，也只生成一次并且不调用处置，这是 Table 小部件的性质。为了对此进行测试，您创建了一个 statefullWidget 并将其传递给子列。

更多

• Table (Flutter Widget of the Week)
• Table-class

解决方案 你可以简单地使用 ListView.Builder