关键词:
【中文标题】如何在颤动中隐藏布局溢出消息【英文标题】:How to hide layout overflow message in flutter 【发布时间】:2018-10-10 11:31:58 【问题描述】:我是 Flutter 的新手。使用底片。底片具有正常的恒定高度。它的高度会随着拖动而增加。请参考下面的代码。问题是当底部工作表是正常大小的视图时溢出。请参考附图。我想删除窗口中的溢出消息。
class MyBottomSheet extends StatefulWidget
@override
_MyBottomSheetState createState() => new _MyBottomSheetState();
class _MyBottomSheetState extends State<MyBottomSheet>
Offset dragDetail;
double slidingPercent;
static const PAGE_FULL_HEIGHT= 600.0;
static const PAGE_NORMAL_HEIGHT=80.0;
SlideDirection direction;
static double pageHeight = PAGE_NORMAL_HEIGHT;
static PagePosition pagePosition = PagePosition.Bottom;
onVerticalStart(DragStartDetails details)
dragDetail = details.globalPosition;
onVerticalEnd(DragEndDetails details)
setState(()
if (pageHeight < 300)
pageHeight = PAGE_NORMAL_HEIGHT;
pagePosition = PagePosition.Bottom;
else if (pageHeight > 300)
pageHeight = PAGE_FULL_HEIGHT;
pagePosition = PagePosition.Top;
);
onVerticalUpdate(DragUpdateDetails details)
setState(()
if (dragDetail != null)
final newPosition = details.globalPosition;
final dy = dragDetail.dy - newPosition.dy;
if (dy > 0.0)
direction = SlideDirection.bottomToTop;
else if (dy < 0.0)
direction = SlideDirection.topToBottom;
if (direction == SlideDirection.bottomToTop &&
pagePosition != PagePosition.Top)
pageHeight =
((dy / PAGE_FULL_HEIGHT) * 1000).abs().clamp(PAGE_NORMAL_HEIGHT, PAGE_FULL_HEIGHT);
else if (direction == SlideDirection.topToBottom &&
pagePosition != PagePosition.Bottom)
pageHeight = PAGE_FULL_HEIGHT -
((dy / PAGE_FULL_HEIGHT) * 1000).abs().clamp(PAGE_NORMAL_HEIGHT, PAGE_FULL_HEIGHT);
);
Column buildButtonColumn(IconData icon, String label)
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Icon(icon),
new Container(
margin: const EdgeInsets.only(left: 30.0,right: 30.0),
child: new Text(
label,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Colors.blue,
),
),
),
],
);
@override
Widget build(BuildContext context)
return new Container(
height: pageHeight,
width: MediaQuery.of(context).size.width,
child: new Stack(
children: <Widget>[
new Padding(
padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 0.0),
child: new Card(
elevation: 5.0,
child: new PhysicalModel(
shape: BoxShape.rectangle,
borderRadius: new BorderRadius.circular(5.0),
color: Colors.black12,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
children: <Widget>[
new Align(
alignment: Alignment.topCenter,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
buildButtonColumn(Icons.local_offer, 'Offer'),
buildButtonColumn(Icons.notifications_active, 'Notification'),
buildButtonColumn(Icons.shopping_cart, 'Cart'),
],
),
),
new Divider(color: Colors.black,)
],
),
)),
),
),
new GestureDetector(
onVerticalDragStart: onVerticalStart,
onVerticalDragEnd: onVerticalEnd,
onVerticalDragUpdate: onVerticalUpdate,
)
],
),
);
正常尺寸
全尺寸
【问题讨论】:
【参考方案1】:在flutter中,溢出被认为是错误。并且应该被修复,而不是被忽略。
在您的情况下,是底部表根容器中的height: pageHeight
太小而导致问题。
删除或增加其价值应该可以解决您的问题。
【讨论】:
了解,但在我的情况下,我正在根据向上和向下拖动来调整底部工作表的大小。所以'height: pageHeight'是必需的。我想在底部表中添加一些内容。 考虑使用ListView
而不是Column
。
现在运行良好。即使我尝试使用 Expand
,它也给出了不同的相似结果。但是ListView
是满足我要求的正确解决方案。非常感谢。
是的,但是如果你发布到生产环境就不好了,而且在一些未经测试的手机上,你会得到这个东西。有什么方法可以将其删除以进行生产?
Flutter 中存在不应该抛出溢出错误的情况,所以上面的答案太迂腐了。例如,使用 Heros 时,它会不断抱怨不存在的溢出,并且没有明确的解决方法。其他时候它可能会抱怨小于 1px 的溢出,这是由于 Flutter 的布局代码中的一些不准确,而不是在您的代码中。如果真的有一种方法可以覆盖它并告诉 Flutter 保持安静,那就太好了。【参考方案2】:
尝试用 OverflowBox 包装你的小部件
【讨论】:
正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。当颤动行小部件中发生溢出时,显示隐藏元素数量的计数器
】当颤动行小部件中发生溢出时,显示隐藏元素数量的计数器【英文标题】:Showcountertonumberofelementshiddenwhenoverflowoccursinflutterrowwidget【发布时间】:2021-05-2803:42:08【问题描述】:谁能帮助实现Gmail的这个功能,当电子邮件列表变... 查看详情
如何在颤动中显示横向和纵向的不同布局
】如何在颤动中显示横向和纵向的不同布局【英文标题】:Howtoshowdifferentlayoutforlandscapeandportraitinflutter【发布时间】:2020-06-2123:36:29【问题描述】:只是想知道如何在Flutter中显示横向和纵向的不同布局。在Nativeforandroid中,我们... 查看详情
文本连续溢出,颤动
】文本连续溢出,颤动【英文标题】:TextOverflowinginaRow,Flutter【发布时间】:2021-09-2806:27:13【问题描述】:由于文本过长,我遇到了布局问题,我尝试使用Expanded/Flexible与导致问题的文本填充它所需的空间但它溢出了。我知道这... 查看详情
如何在颤动中隐藏android的底部导航栏
】如何在颤动中隐藏android的底部导航栏【英文标题】:Howtohideandroid\'sbottomnavigationbarinflutter【发布时间】:2019-02-2105:26:30【问题描述】:我真的是Flutter和Android开发的新手,但是否可以通过编程方式隐藏底部导航栏(请参阅下面... 查看详情
如何在颤动应用程序中隐藏单击按钮?
】如何在颤动应用程序中隐藏单击按钮?【英文标题】:Howtohideabuttononclickinaflutterapplication?【发布时间】:2020-07-1315:46:47【问题描述】:normalimageimageafterenteringthemobilenumber在此图中,当用户单击登录按钮时,登录按钮应该会消失... 查看详情
更改 Scaffold.body 值后如何在颤动中隐藏抽屉
】更改Scaffold.body值后如何在颤动中隐藏抽屉【英文标题】:HowtohidedrawerinflutterafterchangingScaffold.bodyvalue【发布时间】:2018-06-1515:35:08【问题描述】:我正在使用这个问题中的方法在颤动中改变脚手架的主体:FlutterDrawerWidget-changeSc... 查看详情
如何在颤动中为布局元素设置背景颜色
】如何在颤动中为布局元素设置背景颜色【英文标题】:Howtosetthebackgroundcolorforalayoutelementinflutter【发布时间】:2020-04-2912:57:29【问题描述】:我想设置左右两列的背景颜色。我认为列/行与Web开发中的引导程序具有相似的含义/功... 查看详情
如何在颤动中显示小吃店消息
】如何在颤动中显示小吃店消息【英文标题】:howtoshowsnackbarmessageinflutter【发布时间】:2021-06-0321:37:02【问题描述】:我试图在用户单击按钮时显示小吃栏,但我不能这样做。我没有收到警告或错误,我不知道我错过了什么这是... 查看详情
如何在颤动中实现这种效果/布局?
】如何在颤动中实现这种效果/布局?【英文标题】:Howtoachievethiseffect/layoutinflutter?【发布时间】:2021-10-0520:29:18【问题描述】:我发现,这种搜索效果是内置在ios框架中的。但是这种布局如何在Flutter中实现呢?【问题讨论】:... 查看详情
如何隐藏select2上的溢出?
】如何隐藏select2上的溢出?【英文标题】:Howtohideoverflowonselect2?【发布时间】:2013-05-0802:57:46【问题描述】:我正在使用出色的select2jquery控件。我正在尝试使用CSSdiv布局来模仿3单元格表格显示布局。当selected大于当前select2宽度... 查看详情
如何在颤动中向 API 服务器发送请求 POST 消息?
】如何在颤动中向API服务器发送请求POST消息?【英文标题】:HowtosendrequestPOSTmessagetoAPIserverinflutter?【发布时间】:2019-06-0119:14:26【问题描述】:我使用NAVERAPI来检测人脸,所以我必须向API服务器发送POST消息。消息格式如下。[HTTP... 查看详情
如何在颤动中禁用每个设备/用户的云消息传递?
】如何在颤动中禁用每个设备/用户的云消息传递?【英文标题】:Howtodisablecloudmessagingperdevice/userinflutter?【发布时间】:2020-04-2814:38:18【问题描述】:对于Flutter应用,我使用Firebase云消息传递和云函数向用户发送推送通知,使用... 查看详情
如何在颤动中显示带有提交按钮和隐藏输入字段的html表单
】如何在颤动中显示带有提交按钮和隐藏输入字段的html表单【英文标题】:Howtoshowhtmlformwithsubmitbuttonandhiddeninputfieldsinflutter【发布时间】:2020-04-2807:10:47【问题描述】:我有一个API可以返回带有隐藏输入字段的html表单(输入字... 查看详情
我在像素溢出的颤动中遇到此错误。任何解决方案。附上溢出的图片
】我在像素溢出的颤动中遇到此错误。任何解决方案。附上溢出的图片【英文标题】:Iamgettingthiserrorinflutterwherethepixelsareoverflowing.Anysolution.Pictureoftheoverflowisattached【发布时间】:2021-12-2108:15:52【问题描述】:import\'package:flutter/mat... 查看详情
如何在颤动中删除特定路线?
】如何在颤动中删除特定路线?【英文标题】:Howtoremoveaparticularrouteinflutter?【发布时间】:2020-05-0511:24:47【问题描述】:我想从导航堆栈中获取特定命名的路由并使用Navigator.removeRoute(context,route);将其删除但是我怎样才能获得路... 查看详情
如何在 Xamarin Forms 中创建隐藏溢出
】如何在XamarinForms中创建隐藏溢出【英文标题】:HowtocreateanhiddenoverflowinXamarinForms【发布时间】:2019-05-1702:16:57【问题描述】:我真的需要在XamarinForms中创建溢出。我怎样才能做到这一点?我的特定用例:我需要以编程方式在水... 查看详情
当新页面被推入颤动时如何隐藏本机Tabbar?
】当新页面被推入颤动时如何隐藏本机Tabbar?【英文标题】:howtohidenativeTabbarwhenanewpagegetspushedinflutter?【发布时间】:2021-06-2904:13:06【问题描述】:我有一个FlutterViewController嵌入在UITabbarController中,当在FlutterViewController中推送新... 查看详情
当项目具有动态高度时,如何根据设备方向创建动态颤动网格布局
】当项目具有动态高度时,如何根据设备方向创建动态颤动网格布局【英文标题】:HowdoIcreateadynamicfluttergridlayoutbasedondeviceorientationwhentheitemshavedynamicheight【发布时间】:2018-12-2923:51:58【问题描述】:我正在尝试创建一个类似于And... 查看详情