flutter页面入门项目

一 flutter特点与核心概念

1.1 一切皆为组件

组件( Widget )是 Flutter 应用程序用户界面的基本构建块。不仅按钮、输入框、卡片、
列表这些内容可作为 Widget ,甚至将布局方式、动画处理都视为 Widget 。所以 Flutter 具有一致的统一对象模型: Widget 。

1.2 Widget 可以定义为 :

一个界面组件(如按钮或输入框) 。
一个文本样式(如字体或颜色) 。
一种布局(如填充或滚动) 。
一种动画处理(如缓动) 。
一种手势处理。
Widget 具有丰富的属性及方法 ,属性通常用来改变组件的状态(颜色、大小等)及回
调方法的处理(单击事件回调、手势事件回调等) 。方法主要是提供一些组件的功能扩展。
比如: TextBox 是一个矩形的文本组件,其属性及方法如下:
bottom : 底部间距属性。
directio n : 文本排列方向属性。
left : 左侧间距属性。
right :右侧间距属性。
top : 上部间距属性。
toRect : 导出矩形方法。
toString :转换成字符串方法。

1.3构建 Widget

可以重写 Widget 的 build 方法来构建一个组件,如下代码所示 :
@protected Widget build(BuildContext context);
build 即为创建一个 Widget 的意思,返回值也是一个 Widget 对象,不管返回的是单个
组件还是返回通过嵌套的方式组合的组件,都是 Widget 的实例。

二个人APP

2.1 listtitle

1-1 新闻咨询
ListView 是 Flutter App 中使用非常多的滚动列表组件，页面大多数情况都是可滚动的，列表聚合图文场景下使用 ListView 的情况非常多。
ListView 除了本身这个 Widget 之外，一般会和 ListTile 配合使用，其中 ListTile 是使用非常多的子项 Widget
基本的结构就是：
|- ListView
|- ListTile
|- ListTile
|- ListTile

 ListTile(
  leading: Image.network(data[index]['shareImageUrl'],width: 100,height: 60,fit: BoxFit.fill,),
  title: Text(data[index]['title']),
  subtitle: Text(data[index]['heatValue'].toString() + " 热度"),
    onTap: () {
      var nav = Navigator.of(context)
          .push(MaterialPageRoute(builder: (BuildContext ctx) {
        var param =  data[index]["content"];
        // 页面跳转时传入参数
        return homepage_deatail(param);
      }));

      // 在Navigator的异步函数中获取返回值
      nav.then((val) => {print(val)});
    },

);

2.2 http网络请求（原生方式）

使用到的库:
库dart:io
库dart:convert
async 和 await 表示异步
pubspec.yaml 文件不需要修改
Dart 语言出来的时间比较晚，吸收了前辈语言们的经验，Java 的原生网络请求代码可是一大截，Dart 语言的简简单单的几行，非常现代化。
HttpClient httpClient = new HttpClient();
// 发起请求
HttpClientRequest request = await httpClient.getUrl(
Uri.parse(“http://api.qiuduoduo.cn/posts?t=rm”)
// 等待服务器返回数据
HttpClientResponse response = await request.close();

2.3 json解析

// 使用utf-8.decoder从response解析数据
var result = await response.transform(utf8.decoder).join();
var mydata = json.decode(result);
/取值/
posts = mydata[‘data’][‘posts’];

2.4 listview.builder

   child: ListView.builder(
            //列表数量
            itemCount: 50,
            //列表高度
            itemExtent: 50.0,
            //动态生成
            itemBuilder: (BuildContext context, int index){
              return _getListData(index);

            },
          )

这是我用list.builder自定义的列表，水平布局是一种常用的布局方式,我们主要使用 Row 组件来完成子组件在水平方向的排列。 Row 组件常见属性如下所示 :
mainAxisAli gnment MainAxisAlignment 主轴的排列方式。
crossAxisAlignment CrossAxisAlignment 次轴的排列方式。
mainAxisSize MainAxisSize 主轴应该占据多少空间。取值 max 为最大, min 为最小。
ch ildren List 组件子元素, 它的本质是一个 List 列表。
在这里插入图片描述
1-2赛事

Column(children: <Widget>[Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text("00:00"),
      new Container(child: Text(data[index]["competitionShortName"]), margin: const EdgeInsets.all(5.0),),
      Text("已结束"),
      Text("专家", style: TextStyle(
        color: Colors.red, // 文字颜色

      ),
      ),

    ]
),
  new Row(

    // mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(child: Text(data[index]["homeShortName"]),),
      Image.network(
          data[index]["homeLogo"], width: 32,
          height: 32)
      ,
      Align(alignment: Alignment.center,
          child: Container(
              child:Text(data[index]["homeScore"].toString()+"-"+data[index]["awayScore"].toString())))
      ,
      Image.network(
          data[index]["awayLogo"],
          width: 32, height: 32)
      ,
      Container(child: Text(data[index]["awayShortName"]),)

    ],),
  Container(
      decoration: BoxDecoration(
          border: Border(bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))
      )
  )

]

);