flutter的功能和自定义Widget有什么区别和用途

Question

在 Flutter 开发中，函数和 Widget 有不同的用途，但对于构建 UI 组件和管理应用程序逻辑都至关重要。我想知道这两者在 Flutter 开发过程中如何正确使用

我需要用例子来明确回答

Answer 1

要了解 helperMethod 和 CustomWidget 之间的区别，您首先需要了解

setState

的工作原理。

简单来说，当您在小部件中使用

setState

时，它会寻找最近的

build

方法并重建它。

因此，当您使用 helperMethod 时，您只需在方法中分离一段代码，但是当您

setState

部分

Widget

（即 helperMethod）时，它会重建整个

Widget

。

但是当您使用 CustomWidget 时，您会在 WidgetTree 中创建一个新分支，因此，如果您

setState

是 Widget 的一部分（即 CustomWidget），它将重建特定部分，因为 CustomWidget 有它的自己的

build

方法

这是一个例子：

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({super.key});

  @override
  State<ExampleWidget> createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  bool isCahnged = false;
  Color? color = Colors.cyan[100];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          for (int i = 0; i < 5; i++)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListTile(
                title: Text("Item $i"),
                tileColor: Colors.purple[100],
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          Center(
            child: const CustomWidget(), // You can use buildHelperMethod() also
          ),
        ],
      ),
    );
  }

  Widget buildHelperMethod() {
    return Container(
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(10),
      constraints: BoxConstraints(
        maxHeight: context.screenHeight * .3,
      ),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          const Text(
            "HelperMethod vs CustomWidget",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Text(
            "This will show you the difference between helperMethod && customWidget",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w300,
              color: Colors.grey,
            ),
          ),
          MaterialButton(
            onPressed: () {
              setState(
                () {
                  isCahnged = !isCahnged;
                  if (isCahnged) {
                    color = Colors.cyan[100]!;
                  } else {
                    color = Colors.brown[100]!;
                  }
                },
              );
            },
            color: Colors.blue,
            child: const Text("Show Me"),
          ),
        ],
      ),
    );
  }
}

class CustomWidget extends StatefulWidget {
  const CustomWidget({super.key});

  @override
  State<CustomWidget> createState() => _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  Color? color = Colors.cyan[100];
  bool isCahnged = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(10),
      constraints: BoxConstraints(
        maxHeight: context.screenHeight * .3,
      ),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          const Text(
            "HelperMethod vs CustomWidget",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Text(
            "This will show you the diffrence between helperMethod && customWidget",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w300,
              color: Colors.grey,
            ),
          ),
          MaterialButton(
            onPressed: () {
              setState(
                () {
                  isCahnged = !isCahnged;
                  if (isCahnged) {
                    color = Colors.cyan[100]!;
                  } else {
                    color = Colors.brown[100]!;
                  }
                },
              );
            },
            color: Colors.blue,
            child: const Text("Show Me"),
          ),
        ],
      ),
    );
  }
}

正如你所看到的，如果你使用

buildHelperMethod()

它将重建：

for (int i = 0; i < 5; i++)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListTile(
                title: Text("Item $i"),
                tileColor: Colors.purple[100],
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),

这是没有必要的，因为里面没有任何东西会改变

另一方面，如果您使用CustomWidget，它将仅用于所需的部分，而这部分:

for (int i = 0; i < 5; i++)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListTile(
                title: Text("Item $i"),
                tileColor: Colors.purple[100],
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),

不会重建，因为它与CustomWidgetbuild

分开。

所以我们可以说 CusomWidget 获胜！！！