Flutter项目目录结构


从入口函数 一步一步往下走
默认生成的项目介绍Flutter项目目录结构及代码

Flutter项目的目录结构

在这里插入图片描述
几个文件夹

文件夹作用
androidandroid平台 代码
iosios平台 代码
libflutter 代码 编写的代码就在这个文件夹
test用于存放测试代码
pubspec.yaml配置文件  存放 第三方的依赖

lib文件夹中的代码,lib中只有一个main.dart文件

入口函数
main方法就是入口函数
默认的箭头函数 写法跟下面写法效果一致
返回 widget
MyApp 是要展示的启动界面
/
* 入口函数*/

void main() => runApp(MyApp()); //Dart中的箭头函数,跟kotlin很像,跟下面写法效果一致
//main(){
//  return new MyApp();
//}

MyApp类 返回 MaterialApp widget
MaterialApp 为ui的风格
Android上就是这种风格的UI. ios上
使用CupertinoApp
在MaterialApp中
配置主题颜色 控件的样式等等

/*
* 这里相当于Android中的Application类
* StatelessWidget表示无状态控件
* */
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
/** MaterialApp表明app的风格是Material Design风格的
 * 配置app的主题相关属性 如颜色 按钮风格等 类似于Android的style文件
 */
    return MaterialApp(
      title: 'Flutter Demo',
      /*主题相关配置 配合app整体的主题样式 比如整体颜色 控件默认的样式等
      * */
      theme: ThemeData(
        /* 类似于Android中的style文件配置 主要就是主题的配置*/
        primaryColor: Colors.red,
        primaryColorDark: Colors.red,
        accentColor: Colors.orange,
        buttonTheme: ButtonThemeData(buttonColor: Colors.red,textTheme: ButtonTextTheme.primary)
      ),
      /*home指定了启动后显示的页面 在AndroidManifest中配置启动页面 */
      home: MyHomePage(title: 'Flutter示例'),
    );
  }
}

MyHomePage 类
是启动后显示的第一个页面 继承自StatefulWidget
/* StatefulWidget  有状态的控件 页面需要更新ui 那么该页面就要继承自StatefulWidget

* 如果只是一个纯展示的页面 只需要继承自StatelessWidget即可
* MyHomePage 在上面已经被指定为启动页面
* 该页面有一个计数的逻辑 更新ui 所以需要继承自StatefulWidget
* */
class MyHomePage extends StatefulWidget {
  /*Dart 中的构造方法  {}里面的参数表示可选参数,跟kotlin概念差不多
  * this.title默认会把值赋给下面的title
  * */
  MyHomePage({Key key, this.title}) : super(key: key);
  /*声明一个变量 final修饰 只能赋一次值
  * 在上面的构造上方法中已经有赋值操作了 所以 就不能再更改title的值了
  * */
  final String title;

  /*所有继承自StatefulWidget的控件都要重写createState()这个方法
  * 可以理解为指定该页面的状态是由谁来控制的
  * 在Dart中下划线开头声明的变量和方法,其默认访问权限就是私有的
  * 类似于java中用private关键字修饰 只能在类的内部访问
  * */
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

_MyHomePageState 类中的代码稍微多一些。
新增了一个_reduceCounter方法
在setState中修改数据后ui的状态会自动更改。
添加了一个按钮并修改了Text的样式

/*
* State是一个状态对象,<>里面是表示该状态是跟谁绑定的
* 我们修改状态时就是在该类中进行编写
*
* */
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  /*计数器加一*/
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  /*这里新建一个方法 执行减一操作*/
  void _reduceCounter() {
    setState(() {
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
/*Scaffold可以看作是Material Design中的一个模板
* 继承自StatefulWidget,包含了appBar,body,drawer等控件
* */
    return Scaffold(
      /*appBar 相当于Android中的ToolBar*/
      appBar: AppBar( /*widget实际上就是MyHomePage*/
        title: Text(widget.title),
      ),
      /*中间的内容布局*/
      body: Center(
        /*Column表示一行 对应的Row表示一列 */
        child: Column(
          /*mainAxisAlignment翻译成中文就是主轴对准的意思 把值设置为star,end等
          * */
          mainAxisAlignment: MainAxisAlignment.center,
          /*子控件,是一个List类型*/
          children: <Widget>[
            /*文本控件*/
            Text( '你点击的次数:', /*修改样式*/
              style: TextStyle(fontSize: 30,letterSpacing: 3),
            ), /*$_counter 用法跟kotlin中的${_counter}类似,*/
            Text(
              '$_counter',  /*Text的样式*/
              style: Theme.of(context).textTheme.display3,

            ),
            /*新增一个按钮,用来实现点击使计数器减一*/
            RaisedButton(
              /*_reduceCounter是上面我们自己新增的方法,Dart中可以把方法作为参数传递*/
              onPressed: _reduceCounter,
              child: Text("减一"),
            )
          ],
        ),
      ),
      /*浮动按钮*/
      floatingActionButton: FloatingActionButton(
        /*_incrementCounter实际上就是一个上面默认的_incrementCounter()方法,*/
        onPressed: _incrementCounter,
        tooltip: '计数器加一',
        child: Icon(Icons.add),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}运行效果图如下

在这里插入图片描述

Flutter默认项目中的目录结构以及代码各自的作用就介绍完毕
在Flutter中 皆widget 界面都是由各种widget堆叠出来的