Anonymous
Компонент Slidable иногда располагается поверх других компонентов, а иногда и снизу — FLUTTER
Сообщение
Anonymous » 15 июл 2024, 13:44
Описание:
Я столкнулся с проблемой с компонентом Slidable в ListView во Flutter. Поведение компонента Slidable непоследовательно в зависимости от количества элементов в списке.
Проблема:
Если в ListView недостаточно элементов, требующих прокрутки, компонент Slidable при перемещении отображается поверх всех остальных компонентов.
Однако, когда ListView имеет достаточно элементов для возможности прокрутки, компонент Slidable при перемещении оказывается под другими компонентами.
Видео проблемы:
Видео
Код:
Код: Выделить всё
/* Events.dart */
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.none,
margin: const EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
child: ListView.builder(
itemCount: widget.lista.length,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Stack(clipBehavior: Clip.none, children: [
Positioned.fill(
child: Row(
children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(bottom: 6),
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(8))),
),
),
],
),
),
Slidable(
key: UniqueKey(),
endActionPane: ActionPane(
extentRatio: 0.2,
motion: const BehindMotion(),
children: [
GestureDetector(
onTap: () {
delete(context, widget.lista[index]);
},
child: Container(
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.only(left: 30),
decoration: const BoxDecoration(
borderRadius: BorderRadius.horizontal(
right: Radius.circular(15)),
color: Colors.red,
),
alignment: Alignment.center,
child: const Icon(Icons.delete_forever,
color: Colors.white),
),
),
]),
child: GestureDetector(
onTap: () {
Navigator.of(context).push(widget.action(
fetchRep: widget.fetchRep,
data: widget.data,
update: widget.update,
action: "mod_el",
report: widget.lista[index]));
},
child: Container(
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.only(bottom: 6),
// margin: const EdgeInsets.fromLTRB(10, 3, 10, 3),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.white, width: 1),
color: HexColor.fromHex(widget.lista[index].color),
),
child: Row(
children: [
Row(
children: [
Icon(
widget.lista[index].reportType == "R"
? Icons.assignment
: Icons.bookmark,
color: Colors.white,
size: 20,
),
const SizedBox(
width: 10,
),
],
),
Center(
child: Text(
"[ ${int.parse(widget.lista[index].quantity).toStringAsFixed(2)} ${widget.lista[index].unityCode} ]",
style: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
const SizedBox(
width: 20,
),
Expanded(
child: Text(
"${widget.lista[index].customerCode} - ${widget.lista[index].taskTypeCode}",
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
]);
},
),
);
}
Код: Выделить всё
/* ContainerEvents.dart */
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 15),
child: AnimatedVisibility(
enter: fadeIn(),
exit: fadeOut(),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.tertiaryContainer,
),
child: widget.loading
? Center(
child: LoadingAnimationWidget.staggeredDotsWave(
color:
Theme.of(context).colorScheme.onTertiaryContainer,
size: 80,
),
)
: Column(
children: [
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"${DateFormat.EEEE('it_IT').format(widget.selezionato)}, ${DateFormat.MMMd('it_IT').format(widget.selezionato)}, ${DateFormat.y('it_IT').format(widget.selezionato)}",
style: TextStyle(
color: Theme.of(context)
.colorScheme
.onTertiaryContainer,
fontSize:
MediaQuery.of(context).size.height /
100 *
2.5,
fontWeight: FontWeight.bold)),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context)
.colorScheme
.inverseSurface,
),
onPressed: () {
showModalBottomSheet(
transitionAnimationController:
AnimationController(
vsync: Navigator.of(context),
duration: const Duration(
milliseconds: 600))
..forward(),
context: context,
isScrollControlled: true,
builder: (context) => Filterbox(
fetchRep: widget.fetchRep,
data: widget.data,
aggiornaData: widget.dayReload),
);
},
child: Icon(
Icons.filter_alt,
color: Theme.of(context).colorScheme.surface,
))
],
),
const SizedBox(
height: 10,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Events(
data: widget.selezionato,
lista: widget.lista,
action: widget.createRoute,
fetchRep: widget.fetchRep,
update: widget.update),
)),
],
))),
);
}
Что я пробовал:
Я экспериментировал с различными стеками и позиционированием конфигурации.
Чего я хочу:
Я хочу, чтобы все ползунки всегда находились поверх других компонентов.
Подробнее здесь:
https://stackoverflow.com/questions/787 ... ometimes-u
1721040267
Anonymous
[b]Описание:[/b] Я столкнулся с проблемой с компонентом Slidable в ListView во Flutter. Поведение компонента Slidable непоследовательно в зависимости от количества элементов в списке. [b]Проблема:[/b] [list] [*]Если в ListView недостаточно элементов, требующих прокрутки, компонент Slidable при перемещении отображается поверх всех остальных компонентов. [*]Однако, когда ListView имеет достаточно элементов для возможности прокрутки, компонент Slidable при перемещении оказывается под другими компонентами. [/list] [b]Видео проблемы:[/b] Видео [b]Код:[/b] [code]/* Events.dart */ Widget build(BuildContext context) { return Container( clipBehavior: Clip.none, margin: const EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10), child: ListView.builder( itemCount: widget.lista.length, shrinkWrap: true, itemBuilder: (BuildContext context, int index) { return Stack(clipBehavior: Clip.none, children: [ Positioned.fill( child: Row( children: [ Expanded( child: Container( margin: const EdgeInsets.only(bottom: 6), decoration: const BoxDecoration( color: Colors.red, borderRadius: BorderRadius.all(Radius.circular(8))), ), ), ], ), ), Slidable( key: UniqueKey(), endActionPane: ActionPane( extentRatio: 0.2, motion: const BehindMotion(), children: [ GestureDetector( onTap: () { delete(context, widget.lista[index]); }, child: Container( margin: const EdgeInsets.only(bottom: 6), padding: const EdgeInsets.only(left: 30), decoration: const BoxDecoration( borderRadius: BorderRadius.horizontal( right: Radius.circular(15)), color: Colors.red, ), alignment: Alignment.center, child: const Icon(Icons.delete_forever, color: Colors.white), ), ), ]), child: GestureDetector( onTap: () { Navigator.of(context).push(widget.action( fetchRep: widget.fetchRep, data: widget.data, update: widget.update, action: "mod_el", report: widget.lista[index])); }, child: Container( padding: const EdgeInsets.all(10), margin: const EdgeInsets.only(bottom: 6), // margin: const EdgeInsets.fromLTRB(10, 3, 10, 3), decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.white, width: 1), color: HexColor.fromHex(widget.lista[index].color), ), child: Row( children: [ Row( children: [ Icon( widget.lista[index].reportType == "R" ? Icons.assignment : Icons.bookmark, color: Colors.white, size: 20, ), const SizedBox( width: 10, ), ], ), Center( child: Text( "[ ${int.parse(widget.lista[index].quantity).toStringAsFixed(2)} ${widget.lista[index].unityCode} ]", style: const TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold), ), ), const SizedBox( width: 20, ), Expanded( child: Text( "${widget.lista[index].customerCode} - ${widget.lista[index].taskTypeCode}", overflow: TextOverflow.ellipsis, style: const TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), ), ], ), ), ), ), ]); }, ), ); } [/code] [code]/* ContainerEvents.dart */ Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(top: 15), child: AnimatedVisibility( enter: fadeIn(), exit: fadeOut(), child: Container( width: MediaQuery.of(context).size.width, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Theme.of(context).colorScheme.tertiaryContainer, ), child: widget.loading ? Center( child: LoadingAnimationWidget.staggeredDotsWave( color: Theme.of(context).colorScheme.onTertiaryContainer, size: 80, ), ) : Column( children: [ const SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Text( "${DateFormat.EEEE('it_IT').format(widget.selezionato)}, ${DateFormat.MMMd('it_IT').format(widget.selezionato)}, ${DateFormat.y('it_IT').format(widget.selezionato)}", style: TextStyle( color: Theme.of(context) .colorScheme .onTertiaryContainer, fontSize: MediaQuery.of(context).size.height / 100 * 2.5, fontWeight: FontWeight.bold)), ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Theme.of(context) .colorScheme .inverseSurface, ), onPressed: () { showModalBottomSheet( transitionAnimationController: AnimationController( vsync: Navigator.of(context), duration: const Duration( milliseconds: 600)) ..forward(), context: context, isScrollControlled: true, builder: (context) => Filterbox( fetchRep: widget.fetchRep, data: widget.data, aggiornaData: widget.dayReload), ); }, child: Icon( Icons.filter_alt, color: Theme.of(context).colorScheme.surface, )) ], ), const SizedBox( height: 10, ), Expanded( child: Padding( padding: const EdgeInsets.only(bottom: 5), child: Events( data: widget.selezionato, lista: widget.lista, action: widget.createRoute, fetchRep: widget.fetchRep, update: widget.update), )), ], ))), ); } [/code] [b]Что я пробовал:[/b] [list] [*]Я экспериментировал с различными стеками и позиционированием конфигурации. [/list] [b]Чего я хочу:[/b] [list] [*] Я хочу, чтобы все ползунки всегда находились поверх других компонентов. [/list] Подробнее здесь: [url]https://stackoverflow.com/questions/78749401/the-slidable-component-sometimes-goes-on-top-of-other-components-and-sometimes-u[/url]