时间戳

首页 > 解决方案 > 绘制带有卡片列表的下拉菜单

flutter - 绘制带有卡片列表的下拉菜单

问题描述

在我的颤振项目中，我想先绘制一个下拉列表，然后再绘制一个卡片列表。

在此处输入图像描述

像上图一样，我想在应用栏下方保留一个下拉菜单，其中包含项目列表（“全部、已访问、待处理、已取消”），并且默认选择“全部”选项。在下拉框下方，我想绘制一张卡片列表。

我的主要目的是根据下拉框中的所选项目选择卡片。如果我从下拉列表中选择“待处理”选项，则将在只有待处理状态的卡片下方显示。如果我从下拉列表中选择全部选项，则将显示所有卡片。

我想根据下拉列表的项目选择卡片。

我已经编写了用于绘制卡片列表的代码，但无法找到为下拉菜单编写代码的方法。请帮我绘制下拉框（在应用栏下方和卡片之前）。

这是我的卡片列表代码：

import 'package:flutter/material.dart';
class AdminHomeContent extends StatefulWidget {
  @override
  _AdminHomeContentState createState() => _AdminHomeContentState();
}

class _AdminHomeContentState extends State<AdminHomeContent> {
Color getdynamicColor(String status) {
    if(status == "Pending"){
      return Colors.lightGreen;
    }
    if (status == "Visited") {
      return Colors.green[900];
    }
    if (status == "Cancelled") {
      return Colors.red;
    }
    return Colors.black;
  }
final List<Patient> patients = [
   Patient('Person A', 'https://images.unsplash.com/photo-1545996124-0501ebae84d0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
          8, 2, 'Pending', '10-08-2015', true),
  Patient('Person B', 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTF8fGh1bWFufGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80',
          8, 5, 'Cancelled', '23-12-2019', false),
  Patient('Person C', 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
          8, 7, 'Visited', '01-02-2019', false),
  Patient('Person D', 'https://upload.wikimedia.org/wikipedia/commons/e/ec/Woman_7.jpg',
          8, 4, 'Pending', '20-09-2018', true),
  Patient('Person E', 'https://cdn.pixabay.com/photo/2017/08/07/14/15/portrait-2604283__340.jpg',
          8, 6, 'Visited', '28-04-2017', false)
  ];
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: aapBarSection('Today\'s Appointments' , Colors.blueAccent[700], context),
      body:
      Container(
        margin: EdgeInsets.only(top: 60.0),
        child: ListView.builder(
          itemCount: patients.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(9.0),
              child: SizedBox(
                height: 120,
                child: Card(
                  elevation: 5.0,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      child: Row(
                        children: [
                          Expanded(
                            flex: 3,
                            child: Container(
                              child: CircleAvatar(
                                backgroundImage: NetworkImage(patients[index].imgPath),
                                radius: 40.0,
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 4,
                            child: Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(patients[index].name, style: TextStyle(
                                    fontSize: 23.0,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87
                                  ),),
                                  SizedBox(
                                    height: 20,
                                  ),
                                  Text(patients[index].completedSession.toString() +'/'+ patients[index].totalSession.toString(),
                                  style: TextStyle(
                                    fontSize: 18.0,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black54
                                  ),),
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 3,
                            child: Container(
                             child: Row(
                               crossAxisAlignment: CrossAxisAlignment.end,
                               children: [
                                 Container(
                                   height: 10,
                                   width: 10,
                                   decoration: BoxDecoration(
                                     shape: BoxShape.circle,
                                     color: getdynamicColor(patients[index].status)
                                   ),
                                 ),
                                 SizedBox(
                                   width: 8.0,
                                 ),
                                 Text(patients[index].status,
                                 style: TextStyle(
                                   fontSize: 15.0,
                                   fontWeight: FontWeight.bold,
                                   color: getdynamicColor(patients[index].status)
                                 ),
                                 ),
                               ],
                             ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
 );
  }
}

这是我的模型类：

病人飞镖

class Patient {
  String name ;
  String imgPath ;
  int totalSession ;
  int completedSession ;
  String status ;
  String dob ;
  bool isActive ;

  Patient(this.name, this.imgPath,this.totalSession,this.completedSession,this.status,this.dob,this.isActive);

}

标签： flutterdartdrop-down-menu

解决方案

使用 ExpansionTile ，很简单

    ExpansionTile(
                      initiallyExpanded: false,
                      title: Text(
                        "Settings",
                        style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.w700,
                            color: Colors.white),
                      ),
                      children: <Widget>[
                        Container(
                          color: Colors.grey[100],
                          child: Column(
                            children: [
                              ListTile(
                                title: Text(
                                  'Charges',
                                  style: TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.w500,
                                      color: Colors.black87),
                                ),
                                onTap: () {},
                              ),
                              Divider(
                                color: Colors.grey[600],
                              ),
                              ListTile(
                                title: Text(
                                  'Billing',
                                  style: TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.w500,
                                      color: Colors.black87),
                                ),
                                onTap: () {},
                              ),

 Divider(
                        color: Colors.grey[600],
                      ),
                      ListTile(
                        title: Text(
                          'Notice',
                          style: TextStyle(
                              fontSize: 16.0,
                              fontWeight: FontWeight.w500,
                              color: Colors.black87),
                        ),
                        onTap: () {},
                      ),
                    ],
                  ),

推荐阅读