flutter - Flutter - resizeToAvoidBottomInset 属性使我的 ListView 被键盘覆盖
问题描述
我将从第一次开始描述我的问题。我有一个带有 BottomNavigationBar、ListView 和自定义搜索小部件的页面(在其中使用 TextField)。每当我使用搜索小部件时,键盘就会出现并带来不必要的白框(我已经浏览了很多这个问题,并通过使用resizeToAvoidBottomInset: false
我的 Scaffold 属性找到了这个修复。使用该属性修复了白框问题,但它带来了一个新问题:我的 ListView 的下半部分现在被键盘挡住了,因为当键盘出现时 ListView 的高度没有得到调整。
这是我的视图代码:
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: double.infinity,
margin: EdgeInsets.all(16),
child: const Text("Inventory",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "Quicksand",
fontSize: 20,
fontWeight: FontWeight.w700)),
),
Container(
child: _buildSearch(),
),
Flexible(
child: Container(
child: FutureBuilder(
future: _fetchData(),
builder: (context, AsyncSnapshot snapshot) {
if (isFiltered) {
isFiltered = false;
return ListView.builder(
// itemCount: snapshot.data.length,
physics: BouncingScrollPhysics(),
itemCount: arrFilteredStock.length,
itemBuilder: (context, index) {
var id = arrFilteredStock[index].id;
var code = arrFilteredStock[index].itemCode;
var comname = arrFilteredStock[index].itemComname;
var unit = arrFilteredStock[index].itemUnit;
var qty =
arrFilteredStock[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
} else {
if (snapshot.data == null) {
return Container(
child: const Center(
child: Text("Loading..."),
));
} else {
return ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
var id = snapshot.data[index].id;
var code = snapshot.data[index].itemCode;
var comname = snapshot.data[index].itemComname;
var unit = snapshot.data[index].itemUnit;
var qty =
snapshot.data[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
}
}
}),
)
)
]))),
);
}
解决方案
我找到了一个临时解决方案:白色必要的白框不见了,ListView可以滚动到最后一个数据。唯一的问题是滚动到ListView的最终数据后,白框再次出现。我认为这比其他解决方案更好。
这是修改后的代码:
@override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
Container(
width: double.infinity,
margin: EdgeInsets.all(16),
child: const Text("Inventory",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "Quicksand",
fontSize: 20,
fontWeight: FontWeight.w700)),
),
Container(
child: _buildSearch(),
),
Flexible(
child: Container(
child: FutureBuilder(
future: _fetchData(),
builder: (context, AsyncSnapshot snapshot) {
if (isFiltered) {
isFiltered = false;
return ListView.builder(
// itemCount: snapshot.data.length,
padding: EdgeInsets.only(bottom: bottom),
physics: BouncingScrollPhysics(),
itemCount: arrFilteredStock.length,
itemBuilder: (context, index) {
var id = arrFilteredStock[index].id;
var code = arrFilteredStock[index].itemCode;
var comname = arrFilteredStock[index].itemComname;
var unit = arrFilteredStock[index].itemUnit;
var qty =
arrFilteredStock[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
} else {
if (snapshot.data == null) {
return Container(
child: const Center(
child: Text("Loading..."),
));
} else {
return ListView.builder(
padding: EdgeInsets.only(bottom: bottom),
physics: BouncingScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
var id = snapshot.data[index].id;
var code = snapshot.data[index].itemCode;
var comname = snapshot.data[index].itemComname;
var unit = snapshot.data[index].itemUnit;
var qty =
snapshot.data[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
}
}
}),
)),
]))),
);
}
这只是一个临时解决方案。任何解决方案将不胜感激。
推荐阅读
- typescript - Vue.js + Typescript:为什么 v-model 不被识别为值?
- javascript - 如何使用 Scss 导入媒体查询?
- sqlalchemy - SQLAlchemy 基于用户输入构建过滤条件
- sql - SQL Server 中的完全递归员工-老板关系
- apache-kafka - kafka-connect 文件脉冲连接器独立无法启动(偏移管理器上找不到类异常)
- c# - c# VLC.Dotnet 播放然后暂停问题
- javascript - Javascript - 如何将 json 解析为两个列表
- php - 尝试使用自定义布局自定义 Woocommerce 结帐页面中的订单审核表。有人可以查看我的代码吗?
- python - Django: What is the simplest way to asynchronously execute some function when there is a change to the database?
- cordova - nativeApiProvider.get(...).retrieveJsMessages 不是函数