flutter listview(07)

固定的垂直布局

class _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _homeState();
  }
}
class _homeState extends State<_home> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text("title"),
        centerTitle: true,
      ),
      body: new ListView(
        children: <Widget>[
          new Image.network(
              "https://cdn2.jianshu.io/assets/web/banner-s-3-7123fd94750759acf7eca05b871e9d17.png"),
          new Image.network(
              "https://cdn2.jianshu.io/assets/web/banner-s-4-b70da70d679593510ac93a172dfbaeaa.png"),
          new Image.network(
              "https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"),
        ],
      ),
    );
  }

固定布局

横向滑动的listview

class _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _homeState();
  }
}
class _homeState extends State<_home> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text("title"),
        centerTitle: true,
      ),
      body: new Container(
        height: 200.0,
        child: new ListView(
          scrollDirection: Axis.horizontal,//ListView滑动方向horizontal水平vertical垂直
          children: <Widget>[
            new Container(
              width: 180.0,
              color: Colors.greenAccent,
            ),
            new Container(
              width: 180.0,
              color: Colors.lightBlue,
            ),
            new Container(
              width: 180.0,
              color: Colors.red,
            ),
            new Container(
              width: 180.0,
              color: Colors.black12,
            ),
            new Container(
              width: 180.0,
              color: Colors.amberAccent,
            )
          ],
        ),
      )
    );
  }

横向滑动

简单demo无限滚动的listview

//pubspec.yaml 中添加包 english_words: ^3.1.0
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'flutter demo',
      home: _home(),
    );
  }
}

class _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _homeState();
  }
}
class _homeState extends State<_home> {
  final data = <WordPair>[];//一个随机英文单词的数据源
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
        appBar: new AppBar(
          title: Text("title"),
          centerTitle: true,
        ),
        body: new ListView.builder(
            padding: EdgeInsets.all(8.0),//内边距
            itemBuilder: (conText, i) {
              if(i.isOdd){//isOdd判断是否是奇数
                return new Divider();//返回下划线
              }
              final index=i~/2;
              if(data.length<=i){
                data.addAll(generateWordPairs().take(10));//数据源添加10条随机英文单词
              }
              return _row(data[index]);
        }));
  }
  Widget _row (WordPair pair){
    return new ListTile(
      title: new Text(pair.asPascalCase,style: TextStyle(fontSize: 15.0),),
    );
  }
}

无限滚动的listview