如何使用 Flutter 向下滚动时隐藏带有动画的小部件

Question

我有两个问题，Icons Buttons如下图所示：

当我向下滚动直到出现另一个小部件（例如地图或图表）时，这里的问题Icons Buttons如下图所示：

所以我的想法是在向下滚动时隐藏这些按钮，并在使用动画滚动应用程序时再次显示它们，但我不知道该怎么做。

这是以下相关代码：

return Scaffold(
        body: Stack(
          alignment: AlignmentDirectional.bottomCenter,
          children: [
            Container(
              height: double.infinity,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 85,
                        left: 10,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text(
                            'Sim information',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          DataTable(
                            headingRowHeight: 20,
                            columnSpacing: 83,
                            dataRowHeight: double.parse('20'),
                            columns: [
                              DataColumn(
                                  label: Text(
                                'Sim operator',
                                style: TextStyle(color: Colors.black),
                              )),
                              DataColumn(
                                label: Row(
                                  children: <Widget>[
                                    Text(
                                      simInfo.operator == null
                                          ? ' '
                                          : simInfo.operator,
                                      style: TextStyle(color: Colors.black),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                            rows: [
                              DataRow(cells: [
                                DataCell(Row(
                                    Text('ICCID'),
                                  ],
                                )),
                                DataCell(
                                    Text(simInfo == null ? '' : simInfo.iccid)),
                              ]),
                            ],
                          ),
                        ],
                      ),
                    ),
                    //Network provider
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 20,
                        left: 10,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text(
                            'Network Provider',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          DataTable(
                            headingRowHeight: 20,
                            columnSpacing: 120,
                            dataRowHeight: double.parse('20'),
                            columns: [
                              DataColumn(
                                  label: Text(
                                'Operator',
                                style: TextStyle(color: Colors.black),
                              )),
                              DataColumn(
                                label: Text(
                                  simInfo == null ? '' : simInfo.operator,
                                  style: TextStyle(color: Colors.black),
                                ),
                              ),
                            ],
                            rows: [
                              DataRow(cells: [
                                DataCell(Row(
                                  children: <Widget>[
                                    Text('MCC'),
                                  ],
                                )),
                                DataCell(
                                  Text(simInfo == null
                                      ? ''
                                      : simInfo.mcc.toString()),
                                ),
                              ]),
                              DataRow(cells: [
                                DataCell(Text('MNC')),
                                DataCell(
                                  Text(simInfo == null
                                      ? ''
                                      : simInfo.mnc.toString()),
                                ),
                              ]),
                            ],
                          ),
                        ],
                      ),
                    ),
                    //Serving Cell
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 20,
                        left: 10,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text(
                            'Serving Cell',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          DataTable(
                              columnSpacing: 120,
                              headingRowHeight: 20,
                              dataRowHeight: double.parse('20'),
                              columns: [
                                DataColumn(
                                    label: Text(
                                  'Data type',
                                  style: TextStyle(color: Colors.black),
                                )),
                                DataColumn(
                                  label: Text(
                                    _baseStation == null
                                        ? ''
                                        : _baseStation.type.toString(),
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ],
                              rows: [
                                DataRow(cells: [
                                  DataCell(
                                    Text('TYPE'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.type.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('CId'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.cid.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('TAC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation == null
                                        ? ''
                                        : _baseStation.tac.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('PCI'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.bsicPscPci.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('LAC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.lac.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('MCC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.mcc.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('MNC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.mnc.toString()),
                                  ),
                                ]),
                              ]),
                          if (_baseStation.type == 'GSM')
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 0,
                              ),
                              child: GSMStationFields(_baseStation),
                            ),
                          if (_baseStation.type == 'LTE')
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 0,
                              ),
                              child: LTEStationFields(_baseStation),
                            ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: SignalStrengthGraph(),
                    ),
                  ],
                ),
              ),
            ),
            if (activeSlotsSize > 1)
              Positioned(
                bottom: 0,
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: RadioBtnSim(changeSlot),
                ),
              ),
          ],
        ),
      );

这是我所说的有问题的小部件部分：

Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: SignalStrengthGraph(),
                    ),

那么有没有其他的解决方案或想法来解决这个问题呢？

我希望这足够清楚，并且有人给我很好的推荐:)..

Answer 1

您可以使用AnimatedContainer() 例如：

var iconContainerHeight = 55.00;

AnimatedContainer(
            duration: Duration(milliseconds: 200),
            height: _bottomBarHeight,
            child: YOUR_CONTAINER WITCH ICONS)

void _scrollListener() {
    if (_controller.position.userScrollDirection == ScrollDirection.reverse) {
      if (iconContainerHeight != 0)
        setState(() {
          iconContainerHeight = 0;
        });
    }
    if (_controller.position.userScrollDirection == ScrollDirection.forward) {
      if (iconContainerHeight == 0)
        setState(() {
          iconContainerHeight = 55;
        });
    }
  }

你记得：

initState() {
    super.initState();
    _controller = ScrollController()..addListener(_scrollListener);
}

和：

 dispose() {
    _controller.removeListener(_scrollListener);
    }