我正在开发 Flutter 应用程序,并添加了 Slidable,这对我来说效果很好。 我唯一的问题是它的高度。我无法将可滑动的高度设置为与我的卡相同,发送下面的图像。我需要红色部分与我的白卡高度相同。我尝试增加卡片的大小,但它也增加了可滑动的大小。
这是我的代码:
return Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
appBar: AppBar(
centerTitle: false,
backgroundColor: Colors.transparent,
elevation: 0,
title: Transform(
transform: Matrix4.translationValues(-40.0, 0.0, 0.0),
child: Text(
AppLocalizations.of(context)!.homeScreenHeading,
style: const TextStyle(
fontSize: 34.0,
fontWeight: FontWeight.w700,
color: Colors.white),
),
),
titleSpacing: 0,
leading: Container(),
actions: [
ClipOval(
child: Container(
width: 41.0,
height: 41.0,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(163, 167, 180, 1),
Color.fromRGBO(138, 142, 152, 1),
],
),
),
child: GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileScreen(
userInitials: widget.userInitials,
name: widget.name,
surname: widget.surname),
fullscreenDialog: false,
),
),
},
child: Stack(
children: [
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.grey[400],
foregroundColor: Colors.white,
child: Text(
widget.userInitials,
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.w700,
color: Color.fromRGBO(255, 255, 255, 1)),
),
),
if (widget.isPhoto)
ClipOval(
child: Image.network(
widget.imageUrl.toString(),
fit: BoxFit.cover,
width: 60,
height: 60,
),
),
],
))),
),
const SizedBox(width: 20),
],
bottom: PreferredSize(
preferredSize: const Size.fromHeight(120.0),
child: Padding(
padding: const EdgeInsets.fromLTRB(12.0, 0.0, 12.0, 12.0),
child: isEmpty
? Center(
child: Text(
randomQuote,
style: const TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(235, 235, 245, 0.6)),
textAlign: TextAlign.center,
),
)
: TextField(
style: const TextStyle(
color: Color.fromRGBO(235, 235, 245, 0.6),
fontSize: 17.0,
fontWeight: FontWeight.w500),
decoration: InputDecoration(
hintText:
AppLocalizations.of(context)!.homeScreenSearchLabel,
hintStyle: const TextStyle(
color: Color.fromRGBO(235, 235, 245, 0.6),
fontWeight: FontWeight.w500,
fontSize: 17.0),
prefixIcon: const Icon(
Icons.search,
color: Color.fromRGBO(235, 235, 245, 0.6),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none,
),
contentPadding: EdgeInsets.zero,
filled: true,
fillColor: const Color.fromRGBO(32, 32, 32, 0.2),
),
),
),
),
),
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(backgroundImage),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
color: Colors.black.withOpacity(0.3),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: Column(
children: <Widget>[
Flexible(
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: notes.length,
itemBuilder: (context, index) {
final note = notes[index];
return Slidable(
endActionPane: ActionPane(
extentRatio: 0.35,
motion: const ScrollMotion(),
children: [
SlidableAction(
onPressed: (BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return DeleteConfirmationDialog(
noteId: note.id);
},
).then((result) {
if (result == 'OK') {
_deleteNote(note.id);
}
});
},
borderRadius: BorderRadius.circular(12),
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete_outline,
label: 'Vymazať',
),
],
),
child: HomeCard(
note: note,
onTap: () => _navigateAndUpdateNote(note),
),
);
},
),
),
],
)),
],
)),
],
),
);
Slidable(
endActionPane: ActionPane(
extentRatio: 0.2,// add as per your need.
motion: const ScrollMotion(),
children: [
SlidableAction(
borderRadius: BorderRadius.circular(12),
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete_outline,
label: 'Delete',
),
],
),
child: HomeCard(
note: note,
onTap: () => _navigateAndUpdateNote(note),
),
);