#flutter #dart
#flutter #dart
Вопрос:
У меня проблема с двумя 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(),
),
Итак, есть ли какое-либо другое решение или идея для решения этой проблемы?
Я надеюсь, что это будет достаточно понятно, и кто-нибудь даст мне хорошую рекомендацию :)..
Ответ №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);
}
Комментарии:
1. Я думаю, что этот ответ является лучшим, но как я могу использовать этот код в своем коде и на что
_controllerссылается?2. Во-первых, вы должны объявить
ScrollController _controller;в своем классе, где вы хотите это использовать. Второе — вы должны объявить_controller = ScrollController()..addListener(_scrollListener);вinitState()next: вы должны написать функцию_scrollListener()3. Превосходный ответ. Работает как шарм.
Ответ №2:
Вы можете использовать Visibility виджет с анимацией и предоставить время для того, чтобы анимация исчезла.
Комментарии:
1. большое спасибо за ваш ответ, но как я могу использовать виджет видимости, связанный с моим кодом: D
2. просто оберните его вокруг виджета, который вы хотите скрыть.
3. Я пробовал это решение, но оно не работает, оно невидимо
IconButtonбез прокрутки4. Вам нужно объединить анимацию с виджетом видимости.
Ответ №3:
Что вам нужно, так это ScrollController. С его помощью ваш код запускается каждый раз, когда пользователь прокручивает. Там вы можете отслеживать текущее смещение прокрутки, и когда оно больше предыдущего значения, которое вы сохранили, вы можете сделать эти кнопки невидимыми.
Эта статья объясняет это довольно хорошо: https://medium.com/@diegoveloper/flutter-lets-know-the-scrollcontroller-and-scrollnotification-652b2685a4ac