Flutter 重构结构

Question

我在网上看到，在 Flutter 中重构小部件时，您应该选择将它们重构为类而不是方法。 所以我想知道我的页面结构是否像这样是不好的 Flutter 做法。

如果是这样，为什么？ 因为在我看来，这样看起来更干净。

class ProfilePage extends StatefulWidget {
  bool isUserProfile;

  ProfilePage(this.isUserProfile, {Key? key}) : super(key: key);

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

///
///Page state class
///
class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
     
        children: [
          _profileBanner(),
          _whiteBackgroundContainer(),
          _profileImage(),
          _userName(),
          _backArrow(),
          _profilePageButtons(),
          _reputationBuble(),
          _friendsAndGamesCounter(),
          _personnalnformationRow(),
          _divider(),
          _biographyTile(),
        ],
      ),
    );
  }

 
}

Answer 1

1. 重构为方法

Text buildHello() => Text('Hello');

1. 重构为小部件

class HelloWidget extends StatelessWidget {
  const HelloWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

现在重构为方法在这里似乎很诱人，但是当 buildHello 太大时，即使 buildHello 内部没有任何更改，它也可能会重建。 但是当谈到重构到小部件时，我们获得了小部件生命周期的所有好处，因此它只会在小部件中的某些内容发生变化时重建。 因此，这可以防止不必要的重建，从而提高性能。 这也提供了 Flutter 为小部件 class 提供的所有优化。

源 链接