在将卡片滑动flutter

问题描述 投票:0回答:1

app example

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

    
flutter
1个回答
0
投票
将滑动的小部件与

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

	
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.