flutter笔记-万物皆是widget

本文主要是介绍flutter笔记-万物皆是widget，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

helloFlluter
自定义Widget
- 优化

这篇文章后就不见写了，学flutter主要是为了更好的使用 flutter-webrtc，所以到这里基本就了解了大部分的知识，后续边用边查；
在flutter中所有的view都叫widget，类似文本组件Text也是集成自widget;

helloFlluter

创建第一个项目如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main()=>runApp(Center(child:  Text("Hello world!!",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20,color: Colors.orange),),)
);

runApp传入的参数就是一个Widget；所以我们可以传入Text，示例中的Center类也是继承自Widget；

或者我们可以直接使用MaterialApp类去创建Material风格的应用；

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() => runApp(MaterialApp(debugShowMaterialGrid: false,debugShowCheckedModeBanner: false,home: Scaffold(appBar: AppBar(title: Text("first app"),),body: Text("Hello world!!",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20, color: Colors.orange),),)));

如图：
在这里插入图片描述

自定义Widget

自定义一个需要以下两步骤：

定义类继承自自己要实现的widget
实现必须要实现的方法build方法；
例如如下示例：

class LYMHomePage extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildthrow UnimplementedError();}
}

其中的build是有flutter自动调用；

优化

在上面的示例main中的调用比较多，这显然不适合项目开发，所以初步优化如下：

void main() => runApp(LYMApp());class LYMApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(debugShowMaterialGrid: false,debugShowCheckedModeBanner: false,home: LYMScaffold());}
}class LYMScaffold extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("first app"),),body:LYMContainerBody(),);}
}
class LYMContainerBody extends StatelessWidget{@overrideWidget build(BuildContext context) {return  const Text("Hello world!!",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20, color: Colors.orange),);}
}

优化原则：因为MaterialApp是Material风格的框架是固定的，如果需要自定义其home也，那那种之前类似view，我们可以自定义view继承自widget实现；
其次Scaffoldhi一个脚手架，也就是相当于iOS中UIViewController；那么我们也可能将其中的body部分分离出来方便自定义实现；

需要注意的是所有的Widget类的状态都是不可改变的所以我们不能再代码里去修改按钮的状态，所以需要单独一个类去记录状态；所以优化如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() => runApp(LYMApp());class LYMApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(debugShowMaterialGrid: false,debugShowCheckedModeBanner: false,home: LYMScaffold());}
}class LYMScaffold extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Center( // 添加 Center widgetchild: Text("first app"),),),body: LYMContentody(),);}
}
/*flag 状态     Stateful 不能定义状态*/
class LYMContentody extends StatefulWidget{@overrideState<StatefulWidget> createState() {return _LYMContentBodyState();}}
class _LYMContentBodyState extends State<LYMContentody> {bool flag = true;@overrideWidget build(BuildContext context) {return Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Checkbox(value: flag,onChanged: (newValue) {// 在改变状态前检查newValue是否为null，尽管当前上下文预期为非nullif (newValue != null) {setState(() {flag = newValue;});}},),const Text("同意协议"),],),);}
}