展开的小部件占据屏幕的整个高度，无论其子项如何
问题描述 投票：0回答：3
我正在使用动态底部工作表，其中一列作为其子项。该列的最后一个子项是网格视图。对于某些小屏幕设备，底部工作表的内容可能会溢出，因此我将网格视图包装在扩展的小部件内。现在，如果内容溢出，它的内容可以滚动。
但这里的问题是，即使网格视图的内容没有溢出（屏幕尺寸足够大），它仍然会扩展到全屏，在底部留下空白空间。过去三天我一直在尝试解决这个问题，但没有结果。我尝试了父子小部件的各种组合，但没有给出令人满意的结果。
我期望的结果是，当内容溢出时，网格视图应该滚动，如果不是，那么它应该只占用所需的空间，而不是整个屏幕。
这是我的整个代码，有问题的网格视图在最后：
showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) {
return Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color.fromARGB(255, 225, 225, 225)),
),
//color: Color.fromARGB(255, 255, 255, 255),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: 0, maxWidth: MediaQuery.of(context).size.width*(2/3)),
child: Text(
'PDF Name',
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
]
),
Expanded(
child: GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
childAspectRatio: 1.25,
children: <Widget>[
FileSaveCard(icon: Icons.phone_android, color: Colors.pink, title: 'Internal Storage', press: (){}),
FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
],
),
),
],
),
);
}
);
},
);
这是输出图像：
它甚至可以滑到手机顶部的状态栏下方。我怎样才能避免这种情况。
这就是我期待的结果：
情况 1：当它溢出时，这工作正常，因为我已将网格视图包装在展开的小部件中，它变得可滚动 -
情况2：当屏幕尺寸足够孩子们使用时，下图应该是输出，但我在底部得到了空白-
好吧，我终于明白了。对于提供安全区域的状态栏重叠部分，所有内容都不起作用，正如 Sagar Acharya 使用 FractionallySizedBox 所建议的那样，确实阻止了它，但它强制底部工作表占据全屏，无论其内容高度如何，在最后一个项目之后留下空白空间。相反，我使用了约束：BoxConstraints(maxHeight: (MediaQuery.of(context).size.height)*0.95)，它不会强制工作表采用完整高度，也防止它与状态栏重叠。
对于另一个问题，我首先从网格视图顶部删除了扩展，并用 SingleChildScrollView 包裹了整个列（包含底部工作表的所有项目）。现在，它会保持内容包裹，直到工作表达到全屏高度，并且当它达到全屏高度时，它就会变得可滚动。
但是我仍然想改变一件事，在我的输出中，底部工作表的全部内容都是可滚动的，但我只想网格视图子项可滚动，最上面的“PDF名称”和“共享/保存文件到” ' 不应随之滚动。我有什么想法可以做到这一点。我尝试在网格视图上使用 SingleChildScrollView 而不是 Column 但它不起作用（当工作表达到全高度时元素溢出）
这是我的代码：
showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) {
return Container(
//height: 900,
constraints: BoxConstraints(maxHeight: (MediaQuery.of(context).size.height)*0.95),
color: Colors.white,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color.fromARGB(255, 225, 225, 225)),
),
//color: Color.fromARGB(255, 255, 255, 255),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: 0, maxWidth: MediaQuery.of(context).size.width*(2/3)),
child: Text(
'PDF Name',
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
]
),
GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
//physics: NeverScrollableScrollPhysics(),
physics: const ScrollPhysics(),
childAspectRatio: 1.25,
children: <Widget>[
FileSaveCard(icon: Icons.phone_android, color: Colors.pink, title: 'Internal Storage', press: (){}),
FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
/*FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),*/
],
),
],
),
),
);
}
);
},
);
任何帮助我将不胜感激。 谢谢你。
3个回答
3
投票
投票
- 我想这就是你想要的答案
import 'package:flutter/material.dart';
import 'package:test11111/test1.dart';
import 'package:get/get.dart';
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: Get.height* 0.4,
color: Colors.white,
child: Column(
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color.fromARGB(255, 225, 225, 225)),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: 0, maxWidth: MediaQuery.of(context).size.width*(2/3)),
child: Text(
'PDF Name',
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
]
),
Expanded(
child: GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
childAspectRatio: 1.25,
children: <Widget>[
FileSaveCard(icon: Icons.phone_android, color: Colors.pink, title: 'Internal Storage', press: (){}),
FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
],
),
),
],
),
),
],
),
);
},
);
},
),
);
}
}
class FileSaveCard extends StatelessWidget {
FileSaveCard(
{Key? key,
required this.icon,
required this.color,
required this.title,
required this.press})
: super(key: key);
IconData icon;
Color color;
String title;
VoidCallback press;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
IconButton(icon: Icon(icon), color: color, onPressed: press),
Text(title)
],
),
);
}
}
1
投票
投票
好吧，从代码中我看到你正在以错误的方式使用东西。
如果您使用 isScrollControlled =true ，它将使用设备的完整高度，因为您已使用展开的 Column 小部件作为其中子项的父项。
接下来，如果您不想要完整的高度，那么您必须使用 Wrap 小部件而不是列，并从网格视图中删除展开的，它将根据子项获取高度。
如果您想要填充模型表以及顶部与状态栏重叠的空间，您可以使用 FractionallySizedBox 小部件
FractionallySizedBox(
heightFactor: 0.95,// This will take 0.05 percent height from the top and show the status bar
)
注意：只有isScrolled为true时才能使用。
所以我根据您提供的代码创建了示例，另外我还添加了我的图标集，因此根据您的需要更改它。
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final items = <Widget>[
//1
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//2
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//3
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//4
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//5
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//6
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//Add the same item below this to make it full screen and items below 7 will have the minimum model sheet height.
//7
// const Icon(
// Icons.phone_android,
// color: Colors.pink,
// semanticLabel: 'Internal Storage',
// ),
//
// FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
// FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
// FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
// FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
];
@override
Widget build(BuildContext context) {
return SafeArea(
top: true,
child: Scaffold(
body: ElevatedButton(
onPressed: () {
showModalBottomSheet<dynamic>(
// use only when you want to use the full height of the screen.
isScrollControlled: items.length > 6 ? true : false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return FractionallySizedBox(
heightFactor: items.length > 6
? 0.95
: null, // This widget will add padding from top showing the status bar
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color.fromARGB(255, 225, 225, 225)),
),
//color: Color.fromARGB(255, 255, 255, 255),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(
8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(
minWidth: 0,
maxWidth:
MediaQuery.of(context)
.size
.width *
(2 / 3)),
child: Text(
'PDF Name',
overflow:
TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight:
FontWeight.bold,
color: Color.fromARGB(
255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(
5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(
255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding:
const EdgeInsets.fromLTRB(
0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(
255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)),
]),
Expanded(
flex: items.length > 6 ? 1 : 0,
child: GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
childAspectRatio: 1.25,
physics: const ScrollPhysics(),
children: items),
),
],
),
),
);
});
},
);
},
child: const Text("Press"),
),
),
);
}
}
运行应用程序并让我知道这是否适合您。
0
投票
投票
我也面临着同样的问题。你有解决这个问题的方法吗？
最新问题
- 如何让任务计划程序作业在运行时包含 Ini 文件
- 安装了小程序和未安装小程序的智能卡有什么区别？
- 我们如何在WPF应用程序中分离单击和双击列表视图？
- R 界等待彼得森锁
- 使用 Windows 运行程序在 GitHub Actions 中求和构建号和变量
- 如何在 ASP.NET Core Web 应用程序中获取 Microsoft Graph 客户端？
- ModuleNotFoundError：没有名为“ttkbootstrap”的模块
- 如何在我的 HTML 页面中显示来自 Catalyst Filestore 的图像文件？
- 如何使用 Py-spark 从 Fabric 中的 Azure 事件中心读取压缩数据
- 在 Apache Ignite 中使用 linq 进行左连接时如何解决“意外查询源：在 CacheQueryable 中加入 ICacheEntry”异常？
- 评论已正确分配给答案对象，但显示在一个答案对象中
- i18n.locale 在 navigatorTo() 到另一个语言之后不会在中间件中更新 - nuxt 3
- 如何循环每一行并更新i值
- XCode 15.3 IOS 构建错误：YGMeasureFunc 的函数指针类型不兼容
- 在 Perforce 中列出特定计算机上用户的工作区
- Telegram Bot：是否可以使用用户名获取用户ID？
- 从 SQL Server 中的动态 XML 层次结构导出数据
- 在 Odoo 16 中创建 One2many 小部件时出错
- 使用服务总线队列强制 Azure Functions 一次仅处理一条消息
- Python 扩展：对 C 部分和 C++ 部分使用不同的编译器标志
© www.soinside.com 2019 - 2024. All rights reserved.