颤动：有没有办法重用小部件？

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

与其将其设为变量，不如将其设为方法，然后将颜色参数传递给它。

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 作为参数的函数..并从该函数 return 您的小部件..

像这样..

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)

希望它能解决您的问题..随时要求澄清 :)

颤动：有没有办法重用小部件？

flutter: Is there a way to reuse a widget?

widget

flutter