# # 布局

## # 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'),
          ],
        ),
      );
    }

1
2
3
4
5
6
7
8
9
10
11
12

#### # 颜色

    // 颜色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,
            ),
          ],
        ),
      );
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

### # 纵向文字列表显示

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

1
2
3
4
5
6
7
8
9
10
11
12

## # 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);
    })

1
2
3
4
5
6
7
8
9
10
11
12

## # 点击事件

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

    // 图片点击事件
    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,
        ),
      );
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14