Flutter iOS平台Slidable组件在TextField区域滑动无响应问题求助
Flutter iOS平台Slidable组件在TextField区域滑动无响应问题求助
我最近在Flutter项目里遇到个头疼的问题:Slidable组件在iOS上,当用户滑动TextField区域时,滑动操作触发不了Slidable的侧滑菜单,但Android上完全正常。看起来是TextField把滑动手势给截胡了,Slidable根本收不到事件。
我试过用Stack把Slidable包起来,再加GestureDetector去捕获滑动手势,但问题还是没解决。
下面是我的完整代码:
import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:get/get.dart'; import 'app/modules/home/controllers/home_controller.dart'; import 'app/routes/app_pages.dart'; void main() { runApp( GetMaterialApp( title: "Application", initialRoute: AppPages.INITIAL, getPages: AppPages.routes, ), ); } class HomeView extends GetView<HomeController> { HomeView({Key? key}) : super(key: key); final textTheme = ThemeData().textTheme; @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Column( children: [ GetBuilder<HomeController>( builder: (controller) { return ListView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), itemCount: 1, itemBuilder: (context, index) { return _buildWorkoutLogEntryCard( context, ); }, ); }, ), ], )), ); } Widget _buildWorkoutLogEntryCard( BuildContext context,) { bool isSlidableOpen = true; // To control whether the Slidable is open return Card( elevation: 2, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 8.0), color: Colors.white, surfaceTintColor: Colors.white, shadowColor: Colors.white, child: GestureDetector( // GestureDetector to capture swipe gestures onHorizontalDragUpdate: (details) { if (details.delta.dx > 0) { // Swiping right isSlidableOpen = true; print(true); } else if (details.delta.dx < 0) { // Swiping left isSlidableOpen = false; print(false); } controller.update(); }, child: Stack( children: [ if (isSlidableOpen) Slidable( endActionPane: ActionPane( motion: const StretchMotion(), extentRatio: 0.6, children: [ SlidableAction( flex: 1, backgroundColor: Colors.red, onPressed: (context) { // Handle action }, icon: Icons.delete, ), ], ), child: Container(), // You can use an empty container as the child ), ListTile( contentPadding: const EdgeInsets.symmetric(horizontal: 10), title: Padding( padding: const EdgeInsets.symmetric(vertical: 16.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(width: 5), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Flexible( child: Padding( padding: const EdgeInsets.only(right: 8.0), child: Text( "hello", overflow: TextOverflow.visible, textAlign: TextAlign.left, style: textTheme.headlineMedium!.copyWith( color: Colors.black, fontWeight: FontWeight.bold, ), ), ), ), ], ), ), Icon( FontAwesomeIcons.arrowLeft, size: 15, ) ], ), ), subtitle: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildWarmUpList(context,true), _buildWarmUpList(context,false), ], ), ), ], ), ), ); } Widget _buildWarmUpList(BuildContext context, bool isWarmUp) { return GetBuilder<HomeController>( builder: (controller) { List<TextEditingController> _weightcontrollers = <TextEditingController>[]; List<TextEditingController> _repcontrollers = <TextEditingController>[]; return ListView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), itemCount: 2, itemBuilder: (context, index) { _weightcontrollers.add(TextEditingController( text: '0' )); _repcontrollers .add(TextEditingController(text: '0')); return Slidable( startActionPane: null, endActionPane: ActionPane( motion: const StretchMotion(), extentRatio: 0.25, children: [ SlidableAction( backgroundColor: Colors.red, icon: Icons.delete, onPressed: (context) { // isWarmUp // ? controller.deleteWarmUpRow(entry, index) // : controller.deleteSetRow(entry, index); }, ), ], ), child: Column( children: [ ListTile( dense: true, minVerticalPadding: 0, contentPadding: EdgeInsets.zero, leading: Container( padding: const EdgeInsets.all(8.0), width: 35, height: 35, decoration: const BoxDecoration( color: Colors.white, boxShadow: <BoxShadow>[ BoxShadow( color: Colors.white, offset: Offset(2, 2), blurRadius: 10.0), ], ), child: isWarmUp ? ColorFiltered( colorFilter: const ColorFilter.mode( Colors.black, BlendMode.srcIn), child: Image.asset( 'assets/stretch.png', height: 15, width: 15, )) : Align( alignment: Alignment.center, child: Text( '${index + 1}', style: textTheme.headlineMedium!.copyWith( color: Colors.black, fontWeight: FontWeight.bold, ), ))), title: Container( decoration: const BoxDecoration( color: Colors.white, boxShadow: <BoxShadow>[ BoxShadow( color: Colors.white, offset: Offset(2, 2), blurRadius: 10.0), ], ), child: Align( alignment: Alignment.center, child: Row( children: [ const SizedBox(width: 30.0), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( width: 60, child: TextFormField( decoration: const InputDecoration( isDense: true, suffixText: 'kg'), controller: _weightcontrollers[index], keyboardType: TextInputType.number, textAlign: TextAlign.end, onTap: () { _weightcontrollers[index].selection = TextSelection( baseOffset: 0, extentOffset: _weightcontrollers[index] .value .text .length); }, onChanged: (value) { // controller.updateWeight( // row, double.tryParse(value) ?? 0); }, ), ), ], ), ), const SizedBox(width: 30.0), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( width: 50, child: TextFormField( decoration: InputDecoration( suffixText: 'reps', ), controller: _repcontrollers[index], onTap: () { _repcontrollers[index].selection = TextSelection( baseOffset: 0, extentOffset: _repcontrollers[index] .value .text .length); }, keyboardType: TextInputType.number, textAlign: TextAlign.right, onChanged: (value) { // controller.updateReps( // row, int.tryParse(value) ?? 0); }, ), ), ], ), ), const SizedBox(width: 30.0), ], ), ), ), ), const Divider( color: Colors.grey, height: 1.0, thickness: 0.25, ), ], ), ); }, ); }, ); } }
有没有大佬知道怎么让Slidable的滑动操作在整个组件范围内都生效,哪怕用户滑的是TextField区域?
备注:内容来源于stack exchange,提问作者Gladiator
相关产品推荐
相关产品推荐

