Function 或 StatelessWidget 哪个最好？ [复制]

Posted 2023-02-23

【中文标题】Function 或 StatelessWidget 哪个最好？ [复制]

【英文标题】：Function or StatelessWidget Which one is best? [duplicate]

【发布时间】：2019-12-02 03:26:54

【问题描述】：

我想让代码更简洁一些。 哪一个更好？ 使用 StatelessWidget 会影响性能吗？

如果只有一个地方可以使用这个小部件，该使用哪一个？

class WebViewPopupMenu extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return PopupMenuButton(
      itemBuilder: (context) => <PopupMenuItem<int>>[
        _buildItem(0, 'Refresh', Icons.refresh),
        WebViewPopupMenuItem(1, 'Favourite', Icons.favorite_border)
      ],
    );
  
  /// 1 used Function
  _buildItem(value, text, iconData) 
    return PopupMenuItem<int>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(
            iconData,
            size: 20,
          ),
          Text(text)
        ],
      ),
    );
  

/// 2 used StatelessWidget
class WebViewPopupMenuItem<T> extends StatelessWidget 
  final T value;
  final IconData iconData;
  final String text;
  WebViewPopupMenuItem(this.value, this.iconData, this.text);

  @override
  Widget build(BuildContext context) 
    return PopupMenuItem<T>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(iconData,size: 20),
          Text(text)
        ],
      ),
    );
  

这里是代码

【问题讨论】：

就个人而言，我会选择第二种方法。它更加可重用和简洁。但是，我会将其移至其他文件。

【参考方案1】：

如果可以，请始终使用无状态或有状态的小部件，而不是返回小部件的函数。

我将使用无状态小部件创建一个新文件。然后在原始导入无状态小部件，并正常使用。这是使用您显示的代码的示例：

父窗口小部件（WebViewPopupMenu.dart）：

import './WebViewPopupMenuItem.dart';

class WebViewPopupMenu extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return PopupMenuButton(
      itemBuilder: (context) => <PopupMenuItem<int>>[
        _buildItem(0, 'Refresh', Icons.refresh),
        WebViewPopupMenuItem(1, 'Favourite', Icons.favorite_border)
      ],
    );
  
  /// 1 used Function
  _buildItem(value, text, iconData) 
    return PopupMenuItem<int>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(
            iconData,
            size: 20,
          ),
          Text(text)
        ],
      ),
    );
  

子小部件（WebViewPopupMenuItem.dart）：

class WebViewPopupMenuItem<T> extends StatelessWidget 
  final T value;
  final IconData iconData;
  final String text;
  WebViewPopupMenuItem(this.value, this.iconData, this.text);

  @override
  Widget build(BuildContext context) 
    return PopupMenuItem<T>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(iconData,size: 20),
          Text(text)
        ],
      ),
    );
  

导入文件后就可以正常使用小部件了。

希望对您有所帮助。真的很容易做，并保持一切简洁/干净。