Flutter 卡片布局和设计

如何解决Flutter 卡片布局和设计

所以我正在尝试创建一个可扩展的卡片。但问题是，我什至不知道如何开始设计。

所以我正在努力实现这个输出

这是我目前的进展

我尝试将两个容器放在一列中，但看起来不对。 有人可以帮我吗。我需要达到卡片的顶部。

这是我当前进度的代码

 Widget buildTabCards() {
 return Container(
    padding: EdgeInsets.only(
      top: 10.0,left: 10,right: 10,),child: Column(children: [
      Card(
        elevation: 5.0,color: Colors.white,child: Padding(
          padding: EdgeInsets.only(
            top: 7,bottom: 10,child: Column(
            children: <Widget>[
              buildCardDateandTime(),buildCardAvatar(),],Widget buildCardDateandTime() {
  return Container(
  child: Row(
    children: [
      Padding(
        padding: EdgeInsets.only(
          left: 15,right: 5,top: 2,child: Icon(
          MdiIcons.clockOutline,size: 22,color: AppColors.blue,Text(
        "12 June,2021,8:00 AM",style: TextStyle(
          fontFamily: "Poppins",color: Colors.black87,letterSpacing: 0.3,fontSize: 20,fontWeight: FontWeight.w400,SizedBox(width: 5),Padding(padding: EdgeInsets.only(left: 50)),IconButton(
        icon: Icon(
          MdiIcons.fromString('dots-vertical'),size: 30,onpressed: () {
          Navigator.of(context).pop();
        },)
    ],);
  }

 Widget buildCardAvatar() {
  return Padding(
    padding: EdgeInsets.only(
      left: 25,top: 5,child: Row(mainAxisAlignment: MainAxisAlignment.start,children: [
      Container(
        padding: EdgeInsets.all(15.0),decoration: Boxdecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(200),color: Colors.red,child: Text(
          "JS",style: TextStyle(
            fontSize: 18.0,color: Colors.black,fontWeight: FontWeight.bold,textAlign: TextAlign.center,SizedBox(
        width: 5.0,Padding(padding: EdgeInsets.only(left: 10)),Expanded(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,children: [
            Text(
              "John Renzo",style: TextStyle(
                fontSize: 20.0,color: Colors.black54,fontWeight: FontWeight.w500,Text(
              "Sangalang",)
          ]))
    ]));
    }

解决方法

先声明一个变量

bool extended = false;

然后

Padding(
          padding: const EdgeInsets.only(left: 12.0,right: 12.0,top: 9.0,bottom: 9.0),child: Container(
            width: MediaQuery.of(context).size.width,child: InkWell(
              onTap: () {
                setState(() {
                  if (extended == null || !extended)
                    extended = true;
                  else
                    extended = false;
                });
              },enableFeedback: false,splashColor: Colors.transparent,highlightColor: Colors.transparent,child: Center(
                child: Padding(
                  padding: const EdgeInsets.all(12.0),child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
                      SizedBox(
                        height: 10.0,),Row(
                        children: <Widget>[
                          Expanded(
                            child: Text(
                              'Text',style: TextStyle(fontSize: 16.0),Icon(
                            extended ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,size: 26,color: Colors.grey,)
                        ],SizedBox(
                        height: 10.0,extended
                          ? Container(
                              height: 100,)
                          : Container()
                    ],decoration: BoxDecoration(
              color: Colors.white,borderRadius: BorderRadius.all(
                Radius.circular(7.0),boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Color.fromRGBO(0,0.09),offset: Offset(0.0,-2.0),blurRadius: 12.0,BoxShadow(
                  color: Color.fromRGBO(0,6.0),],);

,

您可以使用 ExpansionPanel 来实现您的结果

List<bool> isExpanded = []; //the size/length should be equal to the size of your data list


ExpansionPanelList(children: [
          //generate the panels from your data list
          ExpansionPanel(
              headerBuilder: (context,isExpanded) {
                return _headerHere();
              },body: _bodyHere(),isExpanded: isExpanded[0],//index of your card
            canTapOnHeader: true,// to make the complete header clickable
          )
        ],expansionCallback: (panelIndex,expanded) {
            setState(() {
              isExpanded[panelIndex] = !expanded;
            });
          },