flutter - 关于底部溢出消息的说明
问题描述
我正在尝试了解以下脚手架：
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
onPressed: () {
PostCrud().crearNuevoPostTest(_miId);
},
),
body: Column(
children: [
StreamBuilder<List<OtroUsuario>>(
stream: otrosUsuariosBloc.todosOtrosUsuarios(),
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {},
child: Column(
children: [
Container(
width: 67,
height: 67,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
"assets/images/buscar_usuario.png"),
)),
),
],
),
),
);
} else {
var otro_usuario = snapshot.data[index - 1];
bool is_ambassador = false;
is_ambassador = otro_usuario.is_ambassador;
if (is_ambassador) {
return GestureDetector(
child: Stack(
alignment: AlignmentDirectional.center,
overflow: Overflow.visible,
children: [
Column(
children: [
Container(
width: 65,
height: 65,
margin:
const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
otro_usuario
.profile_image),
)),
),
Text(otro_usuario.username,
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.red)),
],
),
Positioned(
left: 61,
top: 52,
child: Container(
height: 22,
width: 22,
child: Image(
image: AssetImage(
"assets/images/home_ambassador.png"))),
),
],
),
onTap: () {},
);
} else {
return GestureDetector(
child: Column(
children: [
Container(
width: 70,
height: 70,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
otro_usuario
.profile_image),
)),
),
Text(
otro_usuario.username,
style: TextStyle(
fontWeight: FontWeight.bold),
),
],
),
onTap: () {},
);
}
}
}),
),
],
),
),
);
}),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.teal,
)
],
),
);
}
}
我应该在屏幕顶部看到一个水平列表视图和一个带有蓝绿色背景的空容器，但我只看到一个底部溢出 36 像素消息和一个浮动按钮的蓝绿色屏幕。
截图：
我想知道为什么所有设备（iPhone 12、iPhone 7、Android 等）都恰好是 36 像素，以及为什么没有显示列表视图。
解决方案
似乎您仅将height: MediaQuery.of(context).size.height,屏幕用于容器并使用 Column 作为其父级，但其他子级没有任何空间。你可以 body: Column用SingleChildScrollView. 第二个问题出现在ListView.builder用Expanded. 通过包装 SizedBox(height:X,解决问题。
SizedBox(
height: 200, // depend on childrens size
child: ListView.builder(..
通过包装Expanded不起作用，因为未定义 listView 祖先列（填充后）大小，并且列父级也来自 Column Widget。您可以使用 Column 进行包装SizedBox，它也可以解决问题。
这是完整的小部件，我已经对这些部分添加了评论。但我更喜欢CustomScrollView这种情况。
希望你能得到片段
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
onPressed: () {
// PostCrud().crearNuevoPostTest(_miId);
},
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// StreamBuilder<List<OtroUsuario>>(
// stream: otrosUsuariosBloc.todosOtrosUsuarios(),
// builder: (context, snapshot) {
// if (!snapshot.hasData) return CircularProgressIndicator();
// return
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
color: Colors.grey.withOpacity(.5),
// height: 200, // you can provide height here
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
/// ListView wi getting Infinite height and we cant use `Expanded while using [SingleChildScrollView]`
SizedBox(
height: 200, // depend on childrens size
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 44,
// snapshot.data.length + 1,
itemBuilder: (context, index) {
// return Text("item $index");
if (index == 0) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {},
child: Column(
children: [
Container(
width: 67,
height: 67,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
"assets/images/buscar_usuario.png"),
)),
),
],
),
),
);
} else {
// var otro_usuario = snapshot.data[index - 1];
bool is_ambassador = true;
is_ambassador = 1 < 2;
// otro_usuario.is_ambassador;
// return Text("On Else");
if (is_ambassador) {
return GestureDetector(
child: Stack(
alignment: AlignmentDirectional.center,
overflow: Overflow.visible,
children: [
Column(
children: [
Container(
width: 65,
height: 65,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
" otro_usuario.profile_image",
),
)),
),
Text(
"otro_usuario.username",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
],
),
Positioned(
left: 61,
top: 52,
child: Container(
height: 22,
width: 22,
child: Image(
image: AssetImage(
"assets/images/home_ambassador.png"))),
),
],
),
onTap: () {},
);
} else {
return GestureDetector(
child: Column(
children: [
Container(
width: 70,
height: 70,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
" otro_usuario.profile_image"),
)),
),
Text(
" otro_usuario.username",
style: TextStyle(
fontWeight: FontWeight.bold),
),
],
),
onTap: () {},
);
}
}
}),
),
],
),
),
// }
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.teal,
)
],
),
),
);
推荐阅读
- reactjs - 警告：propType 失败：提供给 `Route` Google Map React 的无效道具`component`
- regex - 我的正则表达式代码在网站服务器上不起作用，但在我的本地服务器上正常工作
- sapui5 - SAPUI5 - 更新方法上的网关错误
- jenkins - 来自同一代码存储库的不同租户的 Jenkins Docker 映像构建
- c - 客户端如何知道服务器何时发送消息？
- c# - 如何在具有特定命名空间的 Web Api MVC 中获取特定的 xml 格式
- python - 如何通过 Python 代码检索与我的 Facebook 应用程序关联的所有用户数据？
- azure - 从 Azure Blob 存储下载文件的计数
- python - AWS S3 连续字节流上传？
- java - 如何使用 Guice 将 HazelcastMap 正确注入到类中？