Question

除了颜色，我有两个基本相同的小部件。它们是列表视图构建器中的列表图块。有一个检查显示为灰色或红色。唯一要更改的属性是颜色。我知道有copyWith（）函数，但是在这种情况下似乎无法使用。如何重新使用下面的小部件？

Widget listTile = Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.grey[300],  
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
        child: ListTile(
          title: Text(
              message.title),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(message.name),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.alarm_on,
                    color: Colors.redAccent,
                    size: 16,
                  ),
                  Text(message.time),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );

Answer 1

您可以将其设置为方法，然后将color参数传递给它，而不是将其设置为变量。

Widget buildWidget(Color color) {
 return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
        color: color,  // Use your color parameter here
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
        child: ListTile(
          title: Text(
              message.title),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(message.name),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.alarm_on,
                    color: Colors.redAccent,
                    size: 16,
                  ),
                  Text(message.time),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );
}

您还可以将用作参数的消息对象传递给函数

因此您的ListView.builder如下所示：

ListView.builder(
   ..., // other properties
   itemBuilder: (context, index) => buildWidget(/*Your params here*/),
),

Answer 2

制作一个将color作为参数的函数。然后从该函数返回小部件。

这样的事情。

customWidget( Color color){
return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.grey[300],  
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
        child: ListTile(
          title: Text(
              message.title),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(message.name),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.alarm_on,
                    //color: Colors.redAccent,
                    color: color,
                    size: 16,
                  ),
                  Text(message.time),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );
}

只要您想使用它，就可以这样做。

customWidget(Colors.red)

希望它可以解决您的问题。.请随时澄清：）

扑：有没有办法重用一个小部件？

2 个答案: