Question

我有一个带有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));

如何更改列表以保留一个空项目？或对此问题的最佳解决方案是什么？

Answer 1

FloatingActionButton对于非迷你的大小为56，对于迷你的大小为40，因此您可以在padding中使用ListView，例如：< / p>

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

Answer 2

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

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

列表最后一项上的FloatingActionButton

2 个答案: