Flutter 卡片布局与设计答案

【问题标题】：Flutter card layout and designFlutter 卡片布局与设计
【发布时间】：2021-09-01 23:15:39
【问题描述】：

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

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

这是我目前的进度

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

这是我当前进度的代码

 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,
          color: AppColors.blue,
        ),
        onPressed: () {
          Navigator.of(context).pop();
        },
      )
    ],
  ),
  );
  }

 Widget buildCardAvatar() {
  return Padding(
    padding: EdgeInsets.only(
      left: 25,
      top: 5,
      bottom: 10,
    ),
    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",
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.black54,
                fontWeight: FontWeight.w500,
              ),
            )
          ]))
    ]));
    }

【问题讨论】：

标签： flutter frontend flutter-card

【解决方案1】：

先声明一个变量

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, 0, 0.09),
                  offset: Offset(0.0, -2.0),
                  blurRadius: 12.0,
                ),
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, 0.09),
                  offset: Offset(0.0, 6.0),
                  blurRadius: 12.0,
                ),
              ],
            ),
          ),
        );

【讨论】：

【解决方案2】：

您可以使用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;
            });
          },
        ),

【讨论】：