Flutter圈子Android开发Android开发经验谈

一个Flutter的Demo

2018-09-10  本文已影响65人  仕明同学
ezgif-2-c954a6dd5e.gif
ezgif-2-f3661cf95e.gif

App的页面详情

HomePage;里面嵌套了四个页面，使用的是TabBar和 TabBarView的组合，比如安卓中的Fragment Viewpager 

   flutter:
   sdk: flutter
 # The following adds the Cupertino Icons font to your application.
 # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^0.1.0
 fluttertoast: ^2.0.7 #"Packages get" 要去主动的 get 一次依赖
  dio: ^v1.0.3
 # 添加网络依赖
首页.jpg 一些控件.jpg 
 * 首页的关键代码
```
 //为给定的[子]控件创建默认选项卡控制器。
return new DefaultTabController(
    length: 5,
    child: new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.black45,
       // title: titleWidget(),
        title: new Text("首页",style: new TextStyle(color: Colors.white,fontSize: 22.00),),
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.add_a_photo), onPressed: () {
            Navigator
                .of(context)
                .push(new MaterialPageRoute(builder: (context) {
              return new OtherPage();
            }));
          })
        ],
        bottom: new TabBar(
            isScrollable: true,
            labelStyle: new TextStyle(fontSize: 22.00,color: Colors.red),
            indicatorPadding:EdgeInsets.zero,
            labelColor: Colors.white,
            indicatorWeight:4.0,
            unselectedLabelColor: Colors.blueAccent,
            tabs: [
              new Tab(
                text: "豆瓣电影",
              ),
              new Tab(
                text: "控件摆放",
              ),
              new Tab(
                text: "列表展示",
              ),
              new Tab(
                text: "其他控件展示",
              ),
            ]),
      ),
      body: new TabBarView(children: [new TabOne(), new TabTwo(),new TabThree(),new TabFroth()]),
    ));
```

SimilarWordsPage寻找近义词Demo，就是一个点击按钮，然后请求网络，刷新页面的流程。

近义词页面.jpg 
           import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_app/bean/DataBean.dart';
import 'package:fluttertoast/fluttertoast.dart';

class SimilarWordsPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
  return new SimilarWordsPageState();
}
}

class SimilarWordsPageState extends State<SimilarWordsPage> {
List<DataBean> datas = [];
static int i=0;
final TextEditingController _textController = new TextEditingController();

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: findAppBar(),
    backgroundColor: Colors.black12,
    body: findBody(),
  );
}

findBody() {
  return new Container(
      child: new Scaffold(
    body: new ListView.builder(
      itemCount: datas.length,
      itemBuilder: (BuildContext context, int position) {
        i=position;
        return getRow(position);
      },
    ),
  ));
}

Widget findAppBar() {
  return new AppBar(
      title: new Container(
    child: new Row(
      children: <Widget>[
        new Container(
          child: new FlatButton.icon(
            onPressed: () {
              // 本来就在栈顶，退出会有显示的问题
              Navigator.of(context).pop();
            },
            icon: new Icon(Icons.close, color: Colors.white30),
            label: new Text(""),
          ),
          width: 60.0,
        ),
        new Expanded(
          child: new TextField(
            //不要主动弹起来
            autofocus: false,
            controller: _textController,
            decoration: new InputDecoration.collapsed(
                hintText: "请输入要查找的词",
                hintStyle: new TextStyle(color: Colors.red)),
          ),
        ),
        //点击事件的第一种实现的方式  我觉得不太好
        //  new GestureDetector(child: new Icon(Icons.find_in_page),onTap: (){print("dd");})
        // 这种点击时间有点效果
        new IconButton(
            icon: new Icon(Icons.find_in_page),
            onPressed: () {
              print(_textController.text);
              if (_textController.text.isEmpty) {
                Fluttertoast.showToast(
                    msg: "输入为空，请重新输入",
                    timeInSecForIos: 1,
                    bgcolor: "#e74c3c",
                    textcolor: '#ffffff');
              } else {
                FocusNode focusNode = new FocusNode();
                FocusScope.of(context).requestFocus(new FocusNode());
                Fluttertoast.showToast(
                    msg: "查找值为：" + _textController.text,
                    timeInSecForIos: 1,
                    bgcolor: "#e74c3c",
                    textcolor: '#ffffff');
                getApiData(_textController.text);
                focusNode.unfocus();
              }
            })
      ],
    ),
    decoration: new BoxDecoration(
        borderRadius: const BorderRadius.all(const Radius.circular(4.0)),
        color: Colors.white10),
  ));
}

Widget getRow(int i) {
  return new Padding(
    padding: new EdgeInsets.all(10.0),
    // child: new Text("Row ${datas[i].key}",style: new TextStyle(color: Colors.orange,fontSize: 18.00),)
    //  Column 相当于 相对布局  Row 线性布局
    child: new Column(
      children: <Widget>[
        new Padding(
          padding: new EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
          child: new Row(
            children: <Widget>[
              new Expanded(
                  child: new OutlineButton(
                    borderSide:new BorderSide(color: Theme.of(context).primaryColor),
                    child: new Text('条目 = '+i.toString(),style: new TextStyle(color: Theme.of(context).primaryColor),),
                    onPressed: (){},
                  )
              ),
            ],
          ),
        ),

        new Container(
          child: new Text(
            "联想到的词：" + datas[i].key,
            style: new TextStyle(color: Colors.purple, fontSize: 12.00),
          ),
          padding: new EdgeInsets.all(10.0),
        ),
        new Container(
          child: new Text("联想到词的翻译信息：" + datas[i].message,
              style: new TextStyle(color: Colors.cyan, fontSize: 15.00)),
          padding: new EdgeInsets.all(10.0),
        )
      ],
    ),
  );
}

@override
void initState() {
  super.initState();
  // 网络请求
  //http://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=10&client=6&is_need_mean=1&word=sm
  //我的 Api的地址
  getApiData("sm");
}

// 网络请求
void getApiData(String tag) async {
  // 注意导入的包的地方是  import 'dart:io';
  var httpClient = new HttpClient();
  var url =
      "http://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=20&client=6&is_need_mean=1&word=" +
          tag;
  var request = await httpClient.getUrl(Uri.parse(url));
  var response = await request.close();
  if (response.statusCode == HttpStatus.OK) {
    var jsonData = await response.transform(utf8.decoder).join();
    setState(() {
      datas = DataBean.decodeData(jsonData);
    });
    for (int i = 0; i < datas.length; i++) {
      print(datas[i].key);
      print(datas[i].message);
    }
  }
}
}

官方Demo

官方Demo.jpg

关于我

关于我.jpg

一些总结

感谢以下资料给与我的帮助

求赞或者求星星 FlutterApp

上一篇 下一篇

猜你喜欢

热点阅读