Flutter RenderFlex 在鍵盤可見時使用 appbar 后退按鈕溢出

Question

我正在處理 Flutter 中的一個問題，在那里我打開了搜索欄的鍵盤，然后當我 go 使用 appbar 后退按鈕返回頁面時，它會導致此處溢出。 我正在為列表使用 listview.builder，因此它是一個已經展開的可滾動列表，因此我無法使用 SingleChildScrollView 或其他列表視圖。 我還在腳手架中嘗試了 resizeToAvoidBottomInset 。

  Widget _buildList(context) {
if (_searchText.isNotEmpty) {
  List tempList = [];
  for (int i = 0; i < filterCardInformation.length; i++) {
    if ((filterCardInformation[i].title.toString())
        .toLowerCase()
        .contains(_searchText.toLowerCase())) {
      tempList.add(filterCardInformation[i]);
    }
  }
  filterCardInformation = tempList;
}
return ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    return new MyExpandingCard(
        title: filterCardInformation[index].title,
        information: filterCardInformation[index].information,
        phoneList: filterCardInformation[index].phoneList,
        website: filterCardInformation[index].website,
        contactList: filterCardInformation[index].contactList,);
  },
);

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(
    backgroundColor: Color(0xff1c1d4b),
    title: customSearchBar,
    automaticallyImplyLeading: true,
    actions: [
      IconButton(
          onPressed: () {
            setState(() {
              if (customIcon.icon == Icons.search) {
                customIcon = const Icon(Icons.cancel);
                //search bar
                customSearchBar = ListTile(
                  leading: const Icon(
                    Icons.search,
                    color: Colors.white,
                    size: 28,
                  ),
                  title: TextField(
                    controller: _filter,
                    autofocus: true,
                    decoration: const InputDecoration(
                      hintText: 'Type in search...',
                      hintStyle:
                          TextStyle(color: Colors.white, fontSize: 18),
                      border: InputBorder.none,
                    ),
                    style: const TextStyle(color: Colors.white),
                  ),
                );
              } else {
                customIcon = const Icon(Icons.search);
                customSearchBar = const Text('Resources');
              }
            });
          },
          icon: customIcon)
    ],
    centerTitle: true,
  ),
  body: Padding(
    padding: EdgeInsets.all(10.0),
    child: Column(children: [
      Expanded(child: 
      //listview.builder
      _buildList(context),)
    ],)
  ),
);

Answer 1

用 SingleChildScrollView 包裹您的填充並將物理屬性賦予 ScrollPhysics。

body: SingleChildScrollView(
physics: ScrollPhysics();
child: Padding(
padding: EdgeInsets.all(10.0),
child: Column(children: [
  Expanded(child: 
  //listview.builder
  _buildList(context),)
],)

然后在 ListView.builder 中將物理屬性賦予 ClampingScrollPhysics。

return ListView.builder(
physics: ClampingScrollPhysics();
itemBuilder: (BuildContext context, int index) => MyExpandingCard(
    title: filterCardInformation[index].title,
    information: filterCardInformation[index].information,
    phoneList: filterCardInformation[index].phoneList,
    website: filterCardInformation[index].website,
    contactList: filterCardInformation[index].contactList,);

);

Answer 2

實際上找到了導致問題的原因。 使用后退按鈕后導航到的主屏幕的 resizeToAvoidBottomInset 默認設置為 true。 由於在按下后退按鈕后鍵盤在屏幕上停留了一秒鍾，因此會顯示此 renderflex 問題。 因此將其設置為 false 解決了我在頁面上的問題，后退按鈕正在導航以解決我的問題