如何在颤动中隐藏布局溢出消息

Posted

技术标签:

【中文标题】如何在颤动中隐藏布局溢出消息【英文标题】: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。

以上是关于如何在颤动中隐藏布局溢出消息的主要内容,如果未能解决你的问题,请参考以下文章

如何隐藏select2上的溢出?

如何在颤动中使用列中的文本时删除文本溢出

文本连续溢出,颤动

如何在颤动中隐藏android的底部导航栏

如何在 Xamarin Forms 中创建隐藏溢出

如何在颤动中显示横向和纵向的不同布局