Flutter 中如何创建自定义 Widget？

推荐答案

在 Flutter 中创建自定义 Widget 通常有两种方式：

1. 组合现有 Widget：通过组合多个现有的 Widget 来创建新的 Widget。
2. 继承 StatelessWidget 或 StatefulWidget：通过继承 StatelessWidget 或 StatefulWidget 来创建全新的 Widget。

1. 组合现有 Widget

// www.javascriptcn.com code example
class CustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          Text('Hello, World!'),
          ElevatedButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text('Click Me'),
          ),
        ],
      ),
    );
  }
}

2. 继承 StatelessWidget 或 StatefulWidget

继承 StatelessWidget

// www.javascriptcn.com code example
class CustomStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('This is a custom StatelessWidget'),
      ),
    );
  }
}

继承 StatefulWidget

// www.javascriptcn.com code example
class CustomStatefulWidget extends StatefulWidget {
  @override
  _CustomStatefulWidgetState createState() => _CustomStatefulWidgetState();
}

class _CustomStatefulWidgetState extends State<CustomStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom StatefulWidget'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

本题详细解读

1. 组合现有 Widget

组合现有 Widget 是最常见的创建自定义 Widget 的方式。通过将多个现有的 Widget 组合在一起，可以快速构建出复杂的 UI 结构。这种方式的好处是代码简洁、易于维护，并且可以充分利用 Flutter 提供的丰富的 Widget 库。

2. 继承 StatelessWidget 或 StatefulWidget

继承 StatelessWidget

StatelessWidget 是不可变的 Widget，一旦创建后，其状态不会改变。适合用于展示静态内容的场景。通过继承 StatelessWidget，可以创建一个全新的 Widget，并在 build 方法中定义其 UI 结构。

继承 StatefulWidget

StatefulWidget 是可变的 Widget，可以在其生命周期内改变状态。适合用于需要动态更新 UI 的场景。通过继承 StatefulWidget，可以创建一个带有状态的 Widget，并在 State 类中管理其状态和 UI 更新。

总结

在 Flutter 中，创建自定义 Widget 的方式非常灵活，开发者可以根据具体需求选择合适的方式。无论是通过组合现有 Widget，还是通过继承 StatelessWidget 或 StatefulWidget，都可以轻松实现自定义的 UI 组件。