myBlogs_3/docs/FLUTTER/2018_10_25_01 1.md

布局

ListView

图片

Widget _item() {
  return Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        image_on_tap('images/bg.jpg'),
        image_on_tap('images/2.jpeg'),
        image_on_tap('images/4.jpeg'),
      ],
    ),
  );
}

颜色

// 颜色List横排渲染
_colorListView() {
  return Container(
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 160.0,
          color: Colors.red,
        ),
        new Container(
          width: 160.0,
          color: Colors.blue,
        ),
        new Container(
          width: 160.0,
          color: Colors.green,
        ),
        new Container(
          width: 160.0,
          color: Colors.yellow,
        ),
        new Container(
          width: 160.0,
          color: Colors.orange,
        ),
      ],
    ),
  );
}

纵向文字列表显示

// 文字list渲染
_textListView() {
  return Container(
    child: ListView.builder(
      padding: EdgeInsets.all(8.0),
      itemExtent: 20.0,
      itemBuilder: (BuildContext context, int index) {
        return Text('entry $index');
      },
    ),
  );
}

JSON解析

// 依赖
import 'dart:convert';
// 异步加载资源
Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}
// 引入JSON解析器
JsonDecoder decoder = new JsonDecoder();
loadAssetResourcesText().then((value) =>{
  // 访问本地js文件,将返回的数据流解析为JSON格式
  var json = decoder.convert(value);
})

点击事件

该点击事件,可作用任意元素中

// 图片点击事件
Widget image_on_tap(info) {
  // print(info[0]);
  // print(93);
  return GestureDetector(
    onTap: () {
    },
    child: Image.asset(
      '${info["file"]}.png',
      width: 100.0,
      height: 100.0,
    ),
  );
}