Android探路先锋之Flutter 探路Demo（基础）

flutter sdk 路径下就有一些 demo 如下图：

flutter create helloworld  //创建helloworld项目，如上路径下就能看到你创建的项目。
cd helloworld              // 进入项目
flutter run                //编译运行项目到手机  注意 手机要连上USB。

介绍完dos命令下创建和运行后还是到AS里面操作一波。

在AS的 terminal 命令行里面

如果遇到任何异常无法编译的一般都是环境配置的问题建议去我的上一篇博客看下

https://blog.csdn.net/qq_20330595/article/details/79845620

在正式接触main.dart之前我们用AS编写思维思考以下几个问题

程序的入口在哪？也就是说Application在哪？
//在main.dart 中这就是启动方法
void main() => runApp(new MyApp());

//在Demo中是这样写的
import 'package:flutter/material.dart';
import 'package:flutter_demo/app/MainPage.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '这是个啥?',
      theme: new ThemeData(
        primarySwatch: Colors.lime,
      ),
      home: new MainPage("哈哈"),
    );
  }
}

//为了方便跳转 需要这样写
import 'package:flutter/material.dart';
import 'package:flutter_demo/app/MainPage.dart';

void main() =>
    runApp(
        new MaterialApp(
          title: '这是个啥?',
          theme: new ThemeData(
            primarySwatch: Colors.lime,
          ),
          home: new MainPage("哈哈"),
        )
    );

类似于Activity的界面是什么？
```
StatelessWidget  和  StatefulWidget
```

类似于Activity的生命周期方法有吗？或者类似的也可以。

//onCreate
@override
void initState() {
  super.initState();
  controller = new TabController(vsync: this, length: 3);
}
//onDestory
@override
void dispose() {
  super.dispose();
  controller.dispose();
}
//这个方法必填  相当于 setContentView
@override
Widget build(BuildContext context) {}

类似于LinearLayout的控件叫啥？怎么设置方向？

//纵向布局 貌似还有一个 Row 
new Wrap(
    direction: Axis.horizontal,
    alignment: WrapAlignment.start,
    children: <Widget>[
      new Text("我是来看看 对其方式的我是来看看 对其方式的我是来看看 对其方式的\n",
        overflow: TextOverflow.ellipsis, maxLines: 1,),
      new Center(
        child: new Text("对其方式的",
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.right,
          style: new TextStyle(
            letterSpacing: 10.0,
          ),),
      ),
    ]),

如何跳转界面？API？
这个还真不能用Android的思维来理解似乎每个跳转都有固定的写法并不存在startActivity的方法。

new Builder(builder: (BuildContext context) {
  return new RaisedButton(
       onPressed: () {
        var userName = "密码";
        var passWord = "密码";
        if (userName == passWord) {
     //这个是重点
          Navigator.of(context).push(new PageRouteBuilder(
              pageBuilder: (BuildContext context,
                  Animation<double> animation,
                  Animation<double> secondaryAnimation) {
                return new FirstPage(userName);
              }));
        } else {
          Scaffold.of(context).showSnackBar(
              new SnackBar(content: new Text("登录失败，用户名密码有误")));
        }
        onTextClear();
      },
      color: Colors.blue,
      highlightColor: Colors.lightBlueAccent,
      disabledColor: Colors.lightBlueAccent,
      child: new Text(
        "登录",
        style: new TextStyle(color: Colors.white),
      ));
})

那类似于LaunchActivity的自动跳转呢？
在MateriaApp里面配置路由记得导包！！

new MaterialApp(
  title: '这是个啥?',
  routes: <String, WidgetBuilder>{
    '/NicePage': (BuildContext context) => new NicePage(),
  },
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new MainPage("哈哈"),
)

在任何一个点击事件设置

Navigator.of(context).pushNamed("/NicePage");

怎么关闭页面？
```
Navigator.of(context).pop();
```

跳转后怎么传递值？
构造函数

class MainPage extends StatefulWidget {
  final String title;

  MainPage(this.title);

  @override
  MainPagePageState createState() => new MainPagePageState();
}

但是会出现 MainPagePageState 去拿MainPage 中的title 这时候使用widget这个参数

如何新建一个dart文件？
File ->Dart File; 这玩意有时候不出现
File -> New File; 先新建一个然后选择文件类型（我新建WebPage.dart 会无法识别,不知道是不是只有我一个人有这个问题）
button 如何设置icon?
```
new Icon(Icons.sync)
```
是自动导包吗？
Alt+Enter 不过不是总有效。

点击事件如何设置？

//这个和安卓的监听器 是一样的名字  所以应该很好理解
new GestureDetector(
    onTap: buttonClick,
    child: new Container(
        width: 100.0,
        height: 100.0,
        color: Colors.pink,
        child: new Icon(
            _isFavorited ? Icons.favorite : Icons
                .do_not_disturb_alt)
    )
),

ToolBar怎么设置？
在Application中 MaterialApp设置主题

runApp(
    new MaterialApp(
      title: '这是个啥?',
      routes: <String, WidgetBuilder>{
        '/NicePage': (BuildContext context) => new NicePage(),
        '/DetaillPage': (BuildContext context) => new DetaillPage(),
      },
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MainPage("哈哈"),
    )
);

其他页面直接使用AppBar

return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
}

如何弹Toast？
Snackbar

Scaffold.of(context).showSnackBar(
    new SnackBar(content: new Text("登录失败，用户名密码有误")));

Toast

Dialog
这个是官方的一个Demo

Future<Null> doubleClick() async {
  return showDialog<Null>(
    context: context,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return new AlertDialog(
        title: new Text('Rewind and remember'),
        content: new SingleChildScrollView(
          child: new ListBody(
            children: <Widget>[
              new Text('You will never be satisfied.'),
              new Text('You\’re like me. I’m never satisfied.'),
              new Text('You\’re like me. I’m never satisfied.'),
              new Text('You\’re like me. I’m never satisfied.'),
              new Text('You\’re like me. I’m never satisfied.'),
              new Text('You\’re like me. I’m never satisfied.'),
              new Text('You\’re like me. I’m never satisfied.'),
            ],
          ),
        ),
        actions: <Widget>[
          new FlatButton(
            child: new Text('Regret'),
            onPressed: () {
              // 一秒以后将任务添加至event队列
              new Future.delayed(const Duration(seconds: 2), () {
                //任务具体代码
                jumpToMain();
              });
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

嵌套如何实现？

类似于ScollerView的布局

new SingleChildScrollView(
  child: new ListBody(
    children: <Widget>[
      new Text('You will never be satisfied.'),
      new Text('You\’re like me. I’m never satisfied.'),
      new Text('You\’re like me. I’m never satisfied.'),
      new Text('You\’re like me. I’m never satisfied.'),
      new Text('You\’re like me. I’m never satisfied.'),
      new Text('You\’re like me. I’m never satisfied.'),
      new Text('You\’re like me. I’m never satisfied.'),
    ],
  ),
)

如何创建一个底部导航，并设置适配器？
JSON解析怎么操作
https://flutter.io/json/
如何设置类似R.string.app_name 这个样的资源引用？
多层嵌套有何优化方案？
上拉加载更多貌似没有甚至监听都没找到。
这些网上都没有需要去看flutter的一手资料
http://doc.flutter-dev.cn/flutter-for-android/#%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0-listview
相对布局或者帧布局叫什么名字?怎么用？
https://blog.csdn.net/hekaiyou/article/details/53257784
Fragment懒加载实现机制？
https://segmentfault.com/a/1190000014219340
字符串的截取
这个和java基本一致
https://blog.csdn.net/hekaiyou/article/details/51310381
跳转动画怎么设置？
如何设置layout_gravity？
如何设置gravity？
如何设置WebView？
怎么写逻辑？这个很重要！
不要过于依赖热修复大的修改仍然需要 flutter run
android怎么打包？
ios怎么打包？

先到这了，目前一个App的创建布局生成跳转都有所了解，这里提出的问题只是在我写demo时候产生的想法，有些问题也不是一下就能解决的，故会陆续详解。

Android探路先锋之Flutter 探路Demo（基础）

猜你喜欢