Question

我想将这些状态文本（即待处理、取消和已访问）的颜色更改如下：

Pending --> as Lightgreen
Visited --> as Green
Cancel --> as Red

我该怎么做？请帮我做这个，因为我是新手

这是我的代码：

class AdminHomeContent extends StatefulWidget {
  @override
  _AdminHomeContentState createState() => _AdminHomeContentState();
}

    class _AdminHomeContentState extends State<AdminHomeContent> {
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, 'Cancel', '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: 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: 50.0,
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 5,
                          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: 2,
                          child: Container(
                           child: Row(
                             crossAxisAlignment: CrossAxisAlignment.end,
                             children: [
                               Container(
                                 height: 10,
                                 width: 10,
                                 decoration: BoxDecoration(
                                   shape: BoxShape.circle,
                                   color: Colors.lightGreen,
                                 ),
                               ),
                               SizedBox(
                                 width: 8.0,
                               ),
                               Text(patients[index].status,
                               style: TextStyle(
                                 fontSize: 10.0,
                                 fontWeight: FontWeight.bold,
                                 color: Colors.lightGreen
                               ),
                               ),
                             ],
                           ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
 );
  }
}

我想改变那些文本和点的颜色（即点和文本必须是相同的颜色）

我使用容器来创建这些点。

这是我的模型类，字段来自：

patient.dart:-

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);
}

Answer 1

创建一个函数，根据状态返回颜色。从而使代码简洁。编写函数并重用它始终是一个好习惯

使用此功能。

  Color getDynamicColor(String status) {
    if (status == "Pending") {
      return Colors.lightGreen;
    }
    if (status == "Visited") {
      return Colors.green;
    }
    if (status == "Cancel") {
      return Colors.red;
    }
    return Colors.black; //default color. 
 }

并在您的文本小部件中使用它。

Text(patients[index].status,
             style: TextStyle(
              fontSize: 10.0,
               fontWeight: FontWeight.bold,
                color: getDynamicColor(patients[index].status),
    ),

 Container(
  height: 10,
     width: 10,
       decoration: BoxDecoration(
       shape: BoxShape.circle,
       color:getDynamicColor(patients[index].status),
   ),
 ),

Answer 2

您可以使用三元运算符。

Text(patients[index].status,
  style: TextStyle(fontSize: 10.0,
   fontWeight: FontWeight.bold, color: patients[index].status == "Pending" ?  
   Colors.lightGreen ? patients[index].status == "Visited" ? Colors.green : Colors.red))

也对点应用相同的更改。

Answer 3

您可以向类中添加一个方法并根据需要使用它：

class Patient {
  ....
  Color get color {
    return status == 'Pending'
      ? Colors.lightGreen
      : status == 'Visited'
        ? Colors.green
        : Colors.red;
  }
}

如何在颤动中动态更改卡片列表的文本颜色？

3 个答案: