对flutter新建工程的初步认识

时间:2019-02-11
本文章向大家介绍对flutter新建工程的初步认识,主要包括对flutter新建工程的初步认识使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

不管是visual code 还是Android studio 在新建你的第一个flutter工程时都会自动生成一个简易的demo-----说是简单,但是如果能看得懂,会节省很多的学习时间。
即使开发软件不同,工程结构也相同,下面以Android studio为例:

上图除了我蓝线标记的都是工程自动生成的,其中的lib尤为重要,几乎所有的界面、功能代码都在lib中写的;资源文件可以放在自己新建的assets文件夹下;至于引入三方库的则放在pubspec.yaml中,点击该文件你会看到

可以在dependencies下引入你所需要的库,然后点击上面的Packages get稍等片刻即可。
安利一波三方库使用、引入、注意事项的链接:https://pub.dartlang.org/packages/

下面进入正题:
点开main.dart你会看到以下代码(在这里我直接在代码中写注释)

import 'package:flutter/material.dart';


void main() => runApp(MyApp );    //这里是app启动的入口

class MyApp extends StatelessWidget {    //StatelessWidget 是dart文件必须实现的类
  @override
  Widget build(BuildContext context) {
    return MaterialApp(                              //在这里显示了写法1
      title: 'Acesmart',
      theme: ThemeData(                          //主题
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '‘ Home Page'),      //引入你所要展示的界面
    );
  }
}

class MyHomePage extends StatefulWidget {     //在这里显示了写法2,意思是说如果你直接略掉MyApp ,直接runApp(MyHomePage )也可以,其他的自己想想
  MyHomePage({Key key, this.title}) : super(key: key);    ///构造方法,传参key和title

  final String title;
  //构造方法不写的话,下面这个方法是本类唯一要实现的方法
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> { //这个是关键
  int _counter = 0;                    //定义的变量

  void _incrementCounter() {     //定义的方法
    setState(() {
      _counter++;
    });
  }
//必须实现的方法,功能调用、绘制ui都在这
  @override
  Widget build(BuildContext context) {
  //绘制ui的关键处Scaffold,下面会说
    return Scaffold(
      appBar: AppBar(    //头布局
        title: Text(widget.title),
      ),
      body: Center(                           //center:布局居中
        child: Column(                       //Column:子布局分行
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[               //子布局
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',                //上面定义的变量
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(    //在 Material 中定义的一个功能按钮。
        onPressed: _incrementCounter,       //调用上面的方法
        tooltip: 'Increment',
        child: Icon(Icons.add),                   //图标设置,Icons是Material自带的
      ), 
    );
  }
}

上面着重要注意的就是Scaffold:

  • appBar:显示在界面顶部的一个 AppBar

  • body:当前界面所显示的主要内容

  • floatingActionButton: 在 Material 中定义的一个功能按钮。

  • persistentFooterButtons:固定在下方显示的按钮。https://material.google.com/components/buttons.html#buttons-persistent-footer-buttons

  • drawer:侧边栏控件

  • bottomNavigationBar:显示在底部的导航栏按钮栏。可以查看文档:Flutter学习之制作底部菜单导航

  • backgroundColor:背景颜色

  • resizeToAvoidBottomPadding: 控制界面内容 body 是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true。

代码实例就看你新建的工程吧,看完后,如果需要什么控件,可以自主查阅怎么用。