Flutter实践-02

ゝ一纸荒年。 2022-02-28 07:58 190阅读 0赞

# Flutter实践-02 #

## 布局Demo ##

import 'package:flutter/material.dart';
    import 'dart:io';
    import 'dart:convert';
    
    void main() {
      runApp(new MaterialApp(
        title: "Flutter Layout",
        theme: new ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.lightBlue[800],
          accentColor: Colors.cyan[600],
        ),
        home: new MyApp(),
      ));
    }
    
    class MyApp extends StatefulWidget {
      @override
      State createState() {
        return new MyAppState();
      }
    }
    
    class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("Flutter Dicts"),
          ),
          body: new Container(
              color: Colors.greenAccent,
              width: double.infinity,
              height: double.infinity,
              alignment: Alignment.topLeft,
              child: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new IconButton(
                          icon: Icon(Icons.print),
                          color: Colors.amber,
                          onPressed: () => {}),
                      new IconButton(
                          icon: Icon(Icons.access_alarms), onPressed: () => {}),
                      new RaisedButton(
                        onPressed: () => {},
                        child: Text("Hello"),
                      )
                    ],
                  ),
                  new Container(
                    width: double.infinity,
                    height: 40,
                    color: Colors.black,
                    child: new Row(
                      children: <Widget>[
                        new Expanded(
                          child: new Container(
                            decoration: new BoxDecoration(
                                border:
                                    new Border.all(width: 1.0, color: Colors.white),
                                borderRadius: const BorderRadius.all(
                                    const Radius.circular(8.0))),
                            child: new TextField(),
                          ),
                          flex: 1,
                        ),
                        new IconButton(
                            icon: Icon(Icons.search),
                            color: Colors.white,
                            onPressed: () => {}),
                      ],
                    ),
                  ),
                  new Divider(
                    height: 10.0,
                  ),
                  new Expanded(
                    child: new Container(
                      color: Colors.lightBlueAccent,
                      width: double.infinity,
                      height: double.infinity,
                      child: new Stack(
                        children: <Widget>[
                          new IconButton(
                            icon: Icon(Icons.message),
                            onPressed: () => {},
                          ),
                          new IconButton(
                            color: Colors.deepOrange,
                            icon: Icon(Icons.account_circle),
                            onPressed: () => {},
                          ),
                          new Positioned(
                            right: 10.0,
                            bottom: 5.0,
                            child: new IconButton(
                              icon: Icon(Icons.share),
                              onPressed: () => {},
                              iconSize: 100,
                              color: Color.fromRGBO(255, 25, 130, 0.6),
                            ),
                          )
                        ],
                      ),
                    ),
                  )
                ],
              )),
        );
      }
    }

## 词典 ##

参考上一章内容和`有道/必应/金山`翻译服务，编写一个翻译软件。

+------------------------------+
    |       O有道 O金山 O必应        |
    | +--------------------+ +---+ |
    | | hello,world        | |查 | |
    | +--------------------+ +---+ |
    | +--------------------------+ |
    | |                          | |
    | | ......                   | |
    | |                          | |
    | |                          | |
    | |                          | |
    | |                          | |
    | |                          | |
    | |                          | |
    | |                          | |
    | +--------------------------+ |
    +------------------------------+

import 'package:flutter/material.dart';
    import 'dart:io';
    import 'dart:convert';
    
    void main() {
      runApp(new MaterialApp(
        title: "Flutter Demo",
        home: new MyApp(),
      ));
    }
    
    class MyApp extends StatefulWidget {
      @override
      State createState() {
        return new MyAppState();
      }
    }
    
    class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
      final TextEditingController _textController = new TextEditingController();
      int _radioSel = 0;
      String _curTransResult = "", _curTransSrc = "";
    
      void _onRadioChange(int val) {
    //    _radioSel = val;
        setState(() {
          _radioSel = val;
        });
      }
    
      void _onSearchTap(String text) {
        if (text.length < 1) {
          return;
        }
        _textController.clear();
    
        _curTransSrc = text;
    
        if (_radioSel == 0) {
          _getTrasByYoudao(text);
        } else if (_radioSel == 1) {
          _getTrasByJinshan(text);
        } else {
          _getTrasByYoudao(text);
        }
      }
    
      void _getTrasByYoudao(String text) async {
        var responseBody;
        var url =
            'http://fanyi.youdao.com/translate?doctype=json&jsonversion=&type=&keyfrom=&model=&mid=&imei=&vendor=&screen=&ssid=&network=&abtest=&i=$text';
        var httpClient = new HttpClient();
        var request = await httpClient.postUrl(Uri.parse(url));
        var response = await request.close();
        if (response.statusCode == 200) {
          responseBody = await response.transform(utf8.decoder).join();
          responseBody = json.decode(responseBody);
        } else {
          print("error");
        }
        var retVal = "";
        if (responseBody["errorCode"] == 0) {
          retVal = responseBody["translateResult"][0][0]["tgt"].toString();
        }
        setState(() {
          _curTransResult = retVal;
        });
      }
    
      void _getTrasByJinshan(String text) async {
        var responseBody;
        var url = 'http://fy.iciba.com/ajax.php?a=fy&f=auto&t=auto&w=$text';
        var httpClient = new HttpClient();
        var request = await httpClient.getUrl(Uri.parse(url));
        var response = await request.close();
        if (response.statusCode == 200) {
          responseBody = await response.transform(utf8.decoder).join();
          responseBody = json.decode(responseBody);
        } else {
          print("error");
        }
    //    print(responseBody);
        var retVal = "";
        if (responseBody["status"] == 0) {
          for (var one in responseBody["content"]["word_mean"]) {
            retVal += one.toString() + "\r\n";
          }
        }
        setState(() {
          _curTransResult = retVal;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Flutter Dicts"),
            ),
            body: new Container(
                margin: new EdgeInsets.all(10.0),
                child: new Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        new Flexible(
                            child: new RadioListTile<int>(
                          title: Text("有道"),
                          value: 0,
                          groupValue: _radioSel,
                          onChanged: _onRadioChange,
                        )),
                        new Flexible(
                            child: new RadioListTile<int>(
                          title: Text("金山"),
                          value: 1,
                          groupValue: _radioSel,
                          onChanged: _onRadioChange,
                        )),
                      ],
                    ),
                    new Divider(
                      height: 1.0,
                    ),
                    new Container(
                      margin: new EdgeInsets.symmetric(horizontal: 10.0),
                      child: new Row(
                        children: <Widget>[
                          new Flexible(
                              child: new TextField(
                            controller: _textController,
                            onSubmitted: _onSearchTap,
                            decoration:
                                new InputDecoration.collapsed(hintText: '查询内容...'),
                          )),
                          new Container(
                              child: new IconButton(
                                  icon: new Icon(Icons.search),
                                  onPressed: () =>
                                      _onSearchTap(_textController.text)))
                        ],
                      ),
                    ),
                    new Flex(direction: Axis.vertical, children: <Widget>[
    //                  new IconButton(icon: Icon(Icons.add), color: Colors.red , onPressed: null),
                      new RichText(
                        textAlign: TextAlign.left,
                        text: new TextSpan(
                            text: _curTransSrc + "\r\n",
                            style: new TextStyle(
                                inherit: true, fontSize: 26.0, color: Colors.black),
                            children: <TextSpan>[
                              new TextSpan(
                                text: _curTransResult,
                                style: new TextStyle(
                                  inherit: true,
                                  fontWeight: FontWeight.normal,
                                  color: Colors.blue,
                                  fontSize: 20,
                                ),
                              )
                            ]),
                      ),
                    ])
                  ],
                )));
      }
    }

## 天气 ##

。。。