记一次ExpansionPanel(扩展效果)的实现

先看效果
在这里插入图片描述
这种效果实现的思路其实很简单,就把要显示的的和要折叠的内容分为两部分,折叠的内容默认为不显示,当点击按钮的时候就把它显示出来,其实难点在于折叠显示的动画,我是直接参考别人的代码的,看了之后其实也并不难,只能说我对api不熟悉;不多bb直接上代码:

首先是布局没什么好说

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <android.support.v7.widget.RecyclerView
       android:id="@+id/rv_demo"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

</LinearLayout>

RecyclerView子布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginLeft="10dp"
    android:layout_marginTop=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在TableCalendar日历中添加一个控制按钮,以便只显示当前一行日期,您可以使用ExpansionPanelList小部件和自定义的展开/折叠逻辑。 以下是一个示例代码,演示了如何在Flutter中创建一个带有自定义展开/折叠按钮的日历: ```dart import 'package:flutter/material.dart'; import 'package:table_calendar/table_calendar.dart'; class CalendarPage extends StatefulWidget { @override _CalendarPageState createState() => _CalendarPageState(); } class _CalendarPageState extends State<CalendarPage> { bool _isExpanded = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Calendar'), ), body: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(8.0), child: ExpansionPanelList( elevation: 1, expandedHeaderPadding: EdgeInsets.zero, expansionCallback: (int index, bool isExpanded) { setState(() { _isExpanded = !isExpanded; }); }, children: [ ExpansionPanel( headerBuilder: (BuildContext context, bool isExpanded) { return ListTile( leading: Icon(Icons.calendar_today), title: Text('Calendar'), ); }, body: Column( children: [ _isExpanded ? buildCalendar() : Container(), ElevatedButton( onPressed: () { setState(() { _isExpanded = !_isExpanded; }); }, child: Text(_isExpanded ? "Collapse" : "Expand"), ), ], ), isExpanded: _isExpanded, ), ], ), ), ), ); } Widget buildCalendar() { return TableCalendar( // 日历配置选项 // ... calendarStyle: CalendarStyle( // 配置日历样式 // ... ), // 其他日历配置 // ... ); } } ``` 在上面的代码中,我们在ExpansionPanel的`body`部分添加了一个按钮,根据`_isExpanded`布尔值来显示不同的文本("Collapse"或"Expand")。当按钮被点击时,我们调用`setState`方法来切换`_isExpanded`的值,从而展开或折叠日历部分。 请注意,您需要根据您的需求自定义日历的样式和配置。以上代码仅提供了一个基本的框架,您可以根据您的实际需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值