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孩子只生成一次，即使它在屏幕上不可见，也不要调用 dispose，这是TableWidget 的本质。为了测试这一点，您创建一个 statefullWidget 并将其传递给列子项。

更多

• 表格（本周 Flutter 小部件）
• 表级

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