在将卡片滑动flutter

Question

当我的卡从右到左右滑动时，我的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)),
    );
  }
}

Answer 1

将滑动的小部件与

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,
      ),
)