状态组件

本文介绍Flutter的状态组件，无状态组件和有状态组件还有函数组件。

无状态组件

• import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const BannerWidget());
  }
  
  const img1 =
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fa092a42776106d7e76e867d590b971f0.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671269160&t=c20102eb0a87d3fd49f9a4b3776daedd";
  
  class BannerWidget extends StatelessWidget {
    const BannerWidget({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Image.network(img1);
    }
  }
  

有状态组件

有状态组件就像一个舞台，舞台上都是无状态组件；

• import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const BannerWidget());
  }
  
  const img1 =
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fa092a42776106d7e76e867d590b971f0.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671269160&t=c20102eb0a87d3fd49f9a4b3776daedd";
  const img2 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-3b345224fce3c12bf0a822aa488ae2fc_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671270631&t=53cd2791f93fd3038012614d1c5e99ce";
  
  class BannerWidget extends StatefulWidget {
    const BannerWidget({Key? key}) : super(key: key);
  
    @override
    State<BannerWidget> createState() => _BannerWidgetState();
  }
  
  class _BannerWidgetState extends State<BannerWidget> {
    String? imgUrl;
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('无状态')),
          body: Column(
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    imgUrl = imgUrl == img1 ? img2 : img1;
                  });
                },
                child: const Text("切换图片"),
              ),
              Text(imgUrl ?? img1),
              Text(imgUrl ?? img1),
              Text(imgUrl ?? img1)
            ],
          ),
        ),
      );
    }
  }
  

函数组件

函数组件没有Container包裹，类组件有Container包裹；

Flutter 这样做是出于性能考虑，所以如果你是可复用组件，需要用 class 包裹；

• Widget imageWidget({required String imgUrl}) {
    return Container(
      padding: const EdgeInsets.all(10),
      color: Colors.amber,
      child: Image.network(imgUrl),
    );
  }