颤振：有没有办法重用一个小部件？答案

【问题标题】：flutter: Is there a way to reuse a widget?颤振：有没有办法重用一个小部件？
【发布时间】：2020-10-29 21:27:17
【问题描述】：

我有两个基本相同的小部件，除了它们的颜色。它们是列表视图构建器中的列表图块。有一个检查显示为灰色或红色。唯一要更改的属性是颜色。我知道有 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),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );

【问题讨论】：

您可以编写自己的小部件并将颜色作为参数传递吗？

标签： flutter widget

【解决方案1】：

创建一个以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】：

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

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*/),
),

【讨论】：