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

【问题标题】：Function or StatelessWidget Which one is best? [duplicate]Function 或 StatelessWidget 哪个最好？ [复制]
【发布时间】：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)
        ],
      ),
    );
  }
}

这里是代码

【问题讨论】：

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

标签： flutter dart

【解决方案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)
        ],
      ),
    );
  }
}

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

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

【讨论】：