Flutter之hello_flutter案例

464 阅读1分钟

前言

  • 我们写东西都在lib下面下,其它文件夹如android和ios分别是他们各自的配置项
  • pubspec相当于package.json

第一步

引入material组件库,里面规定了很多很多组件,我们可以直接引用,还规定了移动端UI渲染的一些规范

Image.png

第二步

定义入口函数,里面定义系统函数runApp,用来执行当前项目,传入一个组件,他的命名是系统规定好的,不过也可以修改,但是要一并修改

Image.png

第三步

  • 定义无状态组件也叫静态组件  StatelessWidget,定义有状态组件叫StatefulWidget
  • 所有的组件都是一个类,类型是Widget

Image.png

  • override 意思是覆盖式的写法
  • build是一个函数,是一个系统规定好的渲染函数,返回值是一个组件
  • Widget 是返回值类型,表示组件的了
  • 在MyApp这个组件中,很多都是规定好的,我们既然使用了material组件库,那我们主要就渲染它
  • 参数title不会显示在页面上,但是页面收起来的时候会看到
  • 参数theme,规定当前组件的默认颜色
  • 参数home,这个就是我们自己的组件了,传递进去

第三步

我们开始写我们自己的组件

Image.png

  • 每一个组件都是一个类,组件名首字母大写
  • override和build渲染函数是系统规定好的,每一个静态组件中都需要传递一个build函数,不然无法进行UI渲染,返回值类型是Widget,也就是组件的意思

第四步

脚手架工具—Scaffold,可以调用很多的组件

Image.png

最后效果

Image.png