当我的卡从右到左右滑动时,我的flutter应用程序将显示一个删除(和共享)按钮。我想知道如何调整删除按钮的高度,以便将按钮的高度与卡的高度匹配。另外,我想知道如何在每个删除/共享按钮之间放置一个垂直边距。
// lib/widgets/match_card.dart
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import '../models/match_record.dart';
class MatchCard extends StatelessWidget {
final MatchRecord record;
final VoidCallback? onShare;
final VoidCallback? onRemove;
const MatchCard({Key? key, required this.record, this.onShare, this.onRemove}) : super(key: key);
String _formatDate(DateTime date) {
return DateFormat.yMMMd().format(date);
}
@override
Widget build(BuildContext context) {
return Slidable(
key: ValueKey(record.date.toString()),
endActionPane: ActionPane(
motion: const ScrollMotion(),
extentRatio: 0.3,
children: [
SlidableAction(
onPressed: (context) => onShare?.call(),
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
icon: Icons.share,
),
SlidableAction(
onPressed: (context) => onRemove?.call(),
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete,
),
],
),
child: SizedBox(
width: double.infinity,
child: Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
elevation: 4,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Team 1: ${record.team1.join(' & ')}',
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
const SizedBox(height: 4),
Text(
'Team 2: ${record.team2.join(' & ')}',
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text('Score: ${record.score}', style: const TextStyle(fontSize: 14)),
const SizedBox(height: 8),
Text('Date: ${_formatDate(record.date)}', style: TextStyle(fontSize: 12, color: Colors.grey[600])),
],
),
),
),
),
);
}
}
// lib/screens/match_records_page.dart
import 'package:flutter/material.dart';
import '../data/sample_data.dart';
import '../models/match_record.dart';
import '../widgets/match_card.dart';
import 'match_record_creation_modal.dart';
class MatchRecordsPage extends StatefulWidget {
const MatchRecordsPage({Key? key}) : super(key: key);
@override
State<MatchRecordsPage> createState() => _MatchRecordsPageState();
}
class _MatchRecordsPageState extends State<MatchRecordsPage> {
// Start with the initial sample data.
List<MatchRecord> records = List.from(matchRecords);
// Opens the modal and awaits the new match record.
void _openAddModal() async {
final newRecord = await showModalBottomSheet<MatchRecord>(
context: context,
isScrollControlled: true,
builder: (context) => const MatchRecordCreationModal(),
);
// If a record was returned, add it to the list and update the UI.
if (newRecord != null) {
setState(() {
records.add(newRecord);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Match Records')),
body: ListView.builder(
itemCount: records.length,
itemBuilder: (context, index) {
return MatchCard(record: records[index]);
},
),
floatingActionButton: FloatingActionButton(onPressed: _openAddModal, child: const Icon(Icons.add)),
);
}
}
Padding
一起包装,然后检查输出。您也可以使用我的小部件。
Padding(
padding: EdgeInsets.symmetric(
horizontal: Insets.medium16.w,
vertical: Insets.xxsmall4.h,
),
child: Slidable(
endActionPane: ActionPane(
motion: const ScrollMotion(),
extentRatio: 1 / 3,
children: [
SlidableAction(
onPressed: onDeleteCallback,
backgroundColor: context.colorScheme.danger500,
foregroundColor: Colors.white,
icon: Icons.delete,
label: LocaleKeys.delete.tr(),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(Insets.medium16),
bottomRight: Radius.circular(Insets.medium16),
),
),
],
),
child: this,
),
)