列表最后一项上的 FloatingActionButton答案

【问题标题】：FloatingActionButton over last item of list列表最后一项上的 FloatingActionButton
【发布时间】：2019-12-27 10:46:29
【问题描述】：

我有一个带有FloatingActionButton 的可滚动列表。我想让列表在FloatingActionButton 之前完成，因为列表的最后一项不再可见（FAB 它在列表项之上）

return Scaffold(
    body: ListView(
      scrollDirection: Axis.vertical,
      controller: _scrollController,
      shrinkWrap: true,
      children: <Widget>[
        _buildUpcomingExpansionTileEvents(myUpcomingEvents),
        _buildPastExpansionTileEvents(myPastEvents),
      ],
    ),
    floatingActionButton: UnicornDialer(
        parentButtonBackground: Colors.blue,
        orientation: UnicornOrientation.VERTICAL,
        parentButton: Icon(OMIcons.add),
        childButtons: childButtons));

如何更改我的列表以完成一项空项目？或者这个问题的最佳解决方案是什么？

【问题讨论】：

我不确定我是否理解您遇到的问题，您能否提供一张您目前遇到的问题的图片？

标签： flutter dart flutter-layout floating-action-button

【解决方案1】：

为了解决这个问题，我只需添加一个大小合适的框作为列表中的最后一个元素。这样，当用户滚动到列表底部时，您仍然可以在正确的位置突出显示列表末尾。

ListView(
  scrollDirection: Axis.vertical,
  controller: _scrollController,
  shrinkWrap: true,
  children: <Widget>[
    _buildUpcomingExpansionTileEvents(myUpcomingEvents),
    _buildPastExpansionTileEvents(myPastEvents),
    SizedBox(
      height: 100, // or whatever height works for your design
    ),
  ],
),

【讨论】：

【解决方案2】：

FloatingActionButton 的大小为56 用于非迷你和40 用于迷你，所以你可以做的是在ListView 中使用padding 喜欢：

ListView(
  padding: EdgeInsets.only(bottom: 56), // if you have non-mini FAB else use 40
  // ...
),

【讨论】：

你拯救了我的一天