TextFormField游標冒泡和滾動問題在flutter中的應用

當滾動頁面時，游標氣泡與其他小部件和Appbar重疊。你能幫助我嗎？

這個GIF檔案顯示了我的問題。

Widget?

Widget

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(
        標題。Text('AppBar'),
        backgroundColor: Colors.orange,
        仰角。0.0,
      ),
      身體。SafeArea(
        孩子。列(
          兒童。[
            ListView(
              addAutomaticKeepAlives: true。
              shrinkWrap: true,
              兒童。[
                容器(
                  color: Colors.yellow,
                  高度。70。
                  width: MediaQuery.of(context).size.width,
                  孩子。中心(
                    孩子。文本(
                      'This part want not be scrolled',
                      風格。TextStyle(color: Colors.red),
                    ),
                  ),
                )
              ],
            ),
            擴展的(
              孩子。滾動條(
                child: ListView(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  children: [
                    表(
                      children: [
                        TableRow(children: [
                          列()
                            children: [Text('Name') ] 。
                          ),
                          列(
                            兒童。[
                              TextFormField(decoration: InputDecoration())
                            ],
                          )
                        ]),
                        TableRow(
                          兒童。[
                            列(
                              children: [Text('Name')]。
                            ),
                            列(
                              兒童。[
                                TextFormField(decoration: InputDecoration())
                              ],
                            )
                          ],
                        ),
                        TableRow(
                          兒童。[
                            列(
                              children: [Text('Name')]。
                            ),
                            列(
                              兒童。[
                                TextFormField(decoration: InputDecoration())
                              ],
                            )
                          ],
                        ),
                        TableRow(
                          兒童。[
                            列(
                              children: [Text('Name')]。
                            ),
                            列(
                              兒童。[
                                TextFormField(decoration: InputDecoration())
                              ],
                            )
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

Table widget是為非滾動的GridView制作的。它只渲染一次完整的Table widget樹，并保持它的孩子們活著。你可以認為它類似于SingleChildScrollView。在這里，你的Table子程式只生成一次，并且不呼叫處置，即使它在螢屏上不可見，這是TableWidget的本質。為了測驗這一點，你可以創建一個statefullWidget并把它傳遞給列的子程式。

對于更多

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

解決方案ListView.Builder

標籤：

上一篇：Flutter在ListView中添加專案

下一篇：篩選串列視圖后的專案雜亂無章