如何在 flutter listview 中只制作一张可滑动的幻灯片?
How can I make only one slidable slide in a flutter listview?
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class MapSelectPage extends StatefulWidget {
const MapSelectPage({Key? key}) : super(key: key);
@override
State<MapSelectPage> createState() => _MapSelectPageState();
}
class _MapSelectPageState extends State<MapSelectPage> {
@override
Widget build(BuildContext context) {
Get.put<MapSelectViewController>(MapSelectViewController());
MapSelectViewController _controller = Get.find<MapSelectViewController>();
return Scaffold(
body: Obx(() {
if (_controller.mapList.value == null) {
return Center(
child: TLoader.Loader(),
);
} else {
return SafeArea(
child: RefreshIndicator(
child: ListView(
children: [
_pageTitle(),
for (MapData data in _controller.mapList.value!) _mapButton(),
_createMapButton(),
],
),
onRefresh: () async {
_controller.getMapList();
},
),
);
}
}),
);
}
}
// 페이지 타이틀
Widget _pageTitle() {
return Column(
children: [
Text(
"지도를 선택하세요!",
style: TText.style.displaySmall,
)
],
);
}
// 지도 생성버튼
Widget _createMapButton() {
return Container(
padding: const EdgeInsets.all(10),
child: InkWell(
onTap: () => Get.to(const MapCreatePage()),
child: TCard(
child: Column(
children: [
const SizedBox(
height: 200,
child: RiveAnimation.asset(
"images/ani/new_book.riv",
),
),
const SizedBox(height: 10),
Text("새로운 지도를 생성하세요!!", style: TText.style.titleLarge),
],
)),
),
);
}
class _mapButton extends StatelessWidget {
const _mapButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(10),
child: TCard(
child: Container(
width: double.infinity,
child: Slidable(
endActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
SlidableAction(
icon: Icons.ac_unit,
label: "test",
onPressed: (context) {
print("112312");
},
)
],
),
child: Container(
width: double.infinity,
child: InkWell(
onTap: () {
Slidable.of(context)!.close();
},
child: Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"data",
style: TText.style.titleLarge,
),
const SizedBox(height: 10),
Text(
"data",
style: TText.style.titleSmall,
),
],
),
),
),
),
),
),
),
);
}
以上是使用我的slideable的代码,
我在可滑动的内部有一个墨水瓶小部件,当我点击它时,那个滑动应该关闭,但它没有关闭,
═══════= Exception caught by gesture =====
Null check operator used on a null value
═══════= ===============
returns这个错误
}
当我在 listview slidable 中滑动并单击 inkwell 时,slid 应该会关闭,但不会关闭并报错,如何关闭 slide?
Slidable.of(上下文)!.close();
点击后变为空
Slidable.of(上下文)?.close();
不但不能一路做到,还差点成这样
tcard 自定义小部件是
import 'package:flutter/material.dart';
class TCard extends StatelessWidget {
const TCard({
Key? key,
required this.child,
this.padding = 5,
this.onTap,
}) : super(key: key);
final Widget child;
final Function()? onTap;
final double padding;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Ink(
padding: EdgeInsets.all(padding),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.grey,
offset: Offset(1, 2),
blurRadius: 2,
spreadRadius: 2,
),
],
),
child: child,
),
);
}
}
关于报错,可以在使用前检查null。
或者直接替换
Slidable.of(context)!.close();
和
Slidable.of(context)?.close();
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class MapSelectPage extends StatefulWidget {
const MapSelectPage({Key? key}) : super(key: key);
@override
State<MapSelectPage> createState() => _MapSelectPageState();
}
class _MapSelectPageState extends State<MapSelectPage> {
@override
Widget build(BuildContext context) {
Get.put<MapSelectViewController>(MapSelectViewController());
MapSelectViewController _controller = Get.find<MapSelectViewController>();
return Scaffold(
body: Obx(() {
if (_controller.mapList.value == null) {
return Center(
child: TLoader.Loader(),
);
} else {
return SafeArea(
child: RefreshIndicator(
child: ListView(
children: [
_pageTitle(),
for (MapData data in _controller.mapList.value!) _mapButton(),
_createMapButton(),
],
),
onRefresh: () async {
_controller.getMapList();
},
),
);
}
}),
);
}
}
// 페이지 타이틀
Widget _pageTitle() {
return Column(
children: [
Text(
"지도를 선택하세요!",
style: TText.style.displaySmall,
)
],
);
}
// 지도 생성버튼
Widget _createMapButton() {
return Container(
padding: const EdgeInsets.all(10),
child: InkWell(
onTap: () => Get.to(const MapCreatePage()),
child: TCard(
child: Column(
children: [
const SizedBox(
height: 200,
child: RiveAnimation.asset(
"images/ani/new_book.riv",
),
),
const SizedBox(height: 10),
Text("새로운 지도를 생성하세요!!", style: TText.style.titleLarge),
],
)),
),
);
}
class _mapButton extends StatelessWidget {
const _mapButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(10),
child: TCard(
child: Container(
width: double.infinity,
child: Slidable(
endActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
SlidableAction(
icon: Icons.ac_unit,
label: "test",
onPressed: (context) {
print("112312");
},
)
],
),
child: Container(
width: double.infinity,
child: InkWell(
onTap: () {
Slidable.of(context)!.close();
},
child: Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"data",
style: TText.style.titleLarge,
),
const SizedBox(height: 10),
Text(
"data",
style: TText.style.titleSmall,
),
],
),
),
),
),
),
),
),
);
}
以上是使用我的slideable的代码, 我在可滑动的内部有一个墨水瓶小部件,当我点击它时,那个滑动应该关闭,但它没有关闭,
═══════= Exception caught by gesture =====
Null check operator used on a null value
═══════= ===============
returns这个错误 }
当我在 listview slidable 中滑动并单击 inkwell 时,slid 应该会关闭,但不会关闭并报错,如何关闭 slide?
Slidable.of(上下文)!.close();
点击后变为空
Slidable.of(上下文)?.close();
不但不能一路做到,还差点成这样
tcard 自定义小部件是
import 'package:flutter/material.dart';
class TCard extends StatelessWidget {
const TCard({
Key? key,
required this.child,
this.padding = 5,
this.onTap,
}) : super(key: key);
final Widget child;
final Function()? onTap;
final double padding;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Ink(
padding: EdgeInsets.all(padding),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.grey,
offset: Offset(1, 2),
blurRadius: 2,
spreadRadius: 2,
),
],
),
child: child,
),
);
}
}
关于报错,可以在使用前检查null。
或者直接替换
Slidable.of(context)!.close();
和
Slidable.of(context)?.close();