flutter有状态与无状态组件代码片

有状态与无状态组件的创建

DART

import 'dart:ui';

// 有状态组件的创建
class ChewiePlayer extends StatefulWidget {
  // 静态常量量可直接创建
  static final screenWidth = window.physicalSize.width;

  // key是每个组件创建时的唯一标识，可通过?表示该值可传为空
  // 如果需要传入命名参数，声明好命名参数，如tvUrl，然后在构造函数中要求传入该参数。required表示必传该参数
  // 非必传，则可不加required，且可以赋值默认值
  // 然后调用super创建父类构造函数
  const ChewiePlayer({Key? key, required this.tvUrl, this.urlTitle = "若轻小工具"}) : super(key: key);
  final List tvUrl;
  final String urlTitle;

  // 用于State的创建
  @override
  State<StatefulWidget> createState() => _ChewiePlayerState();
}

class _ChewiePlayerState extends State<ChewiePlayer> {
  @override
  Widget build(BuildContext context) {
    // 创建一个Material类型的界面
    return MaterialApp(
      // 设置页面的标题，用于应用缩略图的时候显示
      title: '若轻视频',
      // 设置当前页面初始化路由
      initialRoute: '/',
      // 设置当前页面的主题
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      // 设置不同页面的路由，可通过Navigator.push进行页面的跳转
      routes: {
        // 设置显示页面的根组件
        '/': (context) => Scaffold(
              // 设置顶部栏
              appBar: AppBar(
                // 有抽屉可以定义抽屉图标和点击事件
                leading: Builder(builder: (context) {
                  return IconButton(
                    icon: Icon(Icons.menu, color: Colors.white), //自定义图标
                    onPressed: () {
                      // 打开抽屉菜单
                      Scaffold.of(context).openDrawer();
                    },
                  );
                }),
                // 通过widget来应用传入的命名参数
                title: Text(
                  widget.urlTitle,
                  style: TextStyle(color: Colors.white),
                ),
                // 标题右边的按钮
                actions: [
                   IconButton(
                      onPressed: () {},
                      icon: Icon(
                        Icons.search,
                        color: Colors.white,
                    )),
                ],
              ),
              // 左侧的抽屉组件
              drawer: MyDrawer(),
              // 设置内容区域的组件
              body: Column(),
              // 右下角的悬浮按钮
              floatingActionButton: FloatingActionButton(
                onPressed: (){},
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              ),
            ),
        // 如果路由需要传入多个命名参数，可以用如下方法将 Navigator.pushNamed 传入的参数解析为 Map 传入构造方法
        // ModalRoute.of(context)!.settings.arguments as Map
        // pushNamed 传入的参数如下，上下文，路由名，命名参数arg，这里可以传入Map数据，然后使用的时候解析为Map，如果只有一个数据就直接传就行，不用转Map
        // Navigator.pushNamed(context, "webview", arguments: arg);
        "webview": (context) => RQWebview(
              url: (ModalRoute.of(context)!.settings.arguments as Map)["url"],
              urlTitle: (ModalRoute.of(context)!.settings.arguments
                  as Map)["urlTitle"],
            ),
      },
      // 如果不设置路由，可以直接在home设置页面的根组件，一般为Scaffold组件
      // home: Column()
    );
  }
}

// 无状态组建的创建
class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
            flex: 3,
            child: Drawer(
              child: MediaQuery.removePadding(
                  context: context,
                  removeTop: true,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top: 38.0),
                        child: Row(
                          children: <Widget>[
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 16.0),
                              child: ClipOval(
                                child: Image.asset(
                                  "assets/imgs/wakuwaku.jpg",
                                  width: 80,
                                  height: 80,
                                  fit: BoxFit.fitHeight,
                                ),
                              ),
                            ),
                            Text(
                              "Easul",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                      Expanded(
                        child: ListView(
                          children: <Widget>[
                            ListTile(
                              leading: const Icon(Icons.add),
                              title: const Text('Add account'),
                            ),
                            ListTile(
                              leading: const Icon(Icons.settings),
                              title: const Text('Manage accounts'),
                            ),
                          ],
                        ),
                      ),
                    ],
                  )),
            )),
        Expanded(
          flex: 1,
          child: Column(),
        )
      ],
    );
  }
}