美文网首页
『Flutter』初始化~

『Flutter』初始化~

作者: butterflyer | 来源:发表于2019-01-15 15:07 被阅读53次

    有段时间没写博客了,这段时间一直在看flutter,刚开始看感觉有点怪怪的。于是先去撸了一遍官方文档,
    Flutter官方文档,感觉有些收获啊!
    前期还是环境的搭建,由于之前在公司写vue一直用的vscode,这次决定换成android studio,有完整的ide体验哦!
    环境搭建有些小坑啊,因为刚换了电脑,所以这个flutter环境搞了两边~,蓝瘦。
    flutter是用dart语言写的,我觉得除了ui构建有的怪以外,其他的跟js很相似。

    进入正题吧

    先看下面这段代码

    import 'package:flutter/material.dart';
    //import 'package:flutter_app/strings.dart';
    import 'package:english_words/english_words.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new MaterialApp(
          title: 'start up',
          theme: new ThemeData(
            primaryColor: Colors.white
          ),
          home: new Randomwords()
        );
      }
    }
    class Randomwords extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return new RandomwordsState();
      }
    }
    class RandomwordsState extends State<Randomwords> {
      final _suggestions = <WordPair>[];
      final _biggerFont = const TextStyle(fontSize: 18.0);
      final _saved = new Set<WordPair>();
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('start up appbar'),
            actions: <Widget>[
              new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
              new IconButton(icon: new Icon(Icons.add), onPressed: _pushSaved),
              new IconButton(icon: new Icon(Icons.create), onPressed: _pushSaved),
            ],
          ),
          body: _buildSuggeststions(),
        );
      }
    

    如果要导入dart文件直接import 就够了,跟html差不多

    void main() => runApp(new MyApp()); 启动函数

    StatelessWidget 是不需要可变状态的widget
    StatefulWidget 是需要可变状态的widget。
    import 'package:flutter/material.dart’ 这个地方导入的是flutter自带的组件库

    Scaffold 可以理解为布局脚手架

    class Scaffold extends StatefulWidget {
      /// Creates a visual scaffold for material design widgets.
      const Scaffold({
        Key key,
        this.appBar,
        this.body,
        this.floatingActionButton,
        this.floatingActionButtonLocation,
        this.floatingActionButtonAnimator,
        this.persistentFooterButtons,
        this.drawer,
        this.endDrawer,
        this.bottomNavigationBar,
        this.bottomSheet,
        this.backgroundColor,
        this.resizeToAvoidBottomPadding = true,
        this.primary = true,
      }) : assert(primary != null), super(key: key);
    

    对于flutter的布局,我觉得跟html有很多相似之处,就是堆积木的感觉,不管是什么界面,拆分开就好,


    image.png

    就拿上面这个界面来说,很明显可以拆分成,一个appbar,和一个listview,
    而appbar我们在scaffold中就可以构建出来,listView就需要单独构建,可以放到body的位置,记住,所有的控件都是widget。
    listView构造方法, listView有很多种构造方法,builder只是其中一种,

      Widget _buildSuggeststions() {
        return new ListView.builder(
            padding: EdgeInsets.all(10.0),  //padding 
            scrollDirection: Axis.vertical,//滑动方向
            itemBuilder: (context, i) { //构建cell
              if (i.isOdd) return new Divider();
              final index = i ~/ 2;
              if (index >= _suggestions.length) {
                _suggestions.addAll(generateWordPairs().take(10));
              }
              return _buildRow(_suggestions[index]);  
            });
      }
    

    下面是构建cell的方法,在onTap点击事件中,在setState中更新全局变量 _saved的数量,然后驱动状态UI更新。具体的原理就要设计flutter的生命周期了。

      Widget _buildRow(WordPair pair) {
        final alreadySaved = _saved.contains(pair);
        return new ListTile(
          title: new Text(
            pair.asPascalCase,
            style: _biggerFont,
          ),
          trailing: new Icon(
            alreadySaved ? Icons.favorite : Icons.favorite_border,
            color: alreadySaved ? Colors.red : null,
          ),
          onTap: () {
            setState(() {
              if (alreadySaved) {
                _saved.remove(pair);
              } else {
                _saved.add(pair);
              }
            });
          },
        );
      }
    

    第一篇先到这吧,这段时间应该会一直学习flutter了
    https://github.com/Butteryflyyer/FlutterStudyDemo这是我学习flutter的代码地址,平时写的demo都会放到这里面。

    相关文章

      网友评论

          本文标题:『Flutter』初始化~

          本文链接:https://www.haomeiwen.com/subject/gsnxdqtx.html