Flutter Widget--ListView 学习

---flutter:万物皆控件

初步认识

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView Widget",
      home: Scaffold(
          appBar: AppBar(
            title: Text("ListView Widget Simple"),
          ),
          body: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.account_box),
                title: Text("Item 1"),
              ),
              ListTile(
                leading: Icon(Icons.account_box),
                title: Text("Item 2"),
              ),
              ListTile(
                leading: Icon(Icons.account_box),
                title: Text("Item 3"),
              ),
            ],

            /* children: <Widget>[
            Text("Item 1"),
            Text("Item 2"),
            Text("Item 3"),
          ],*/
          )),
    );
  }
}
图片.png

横向滚动

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView widget horizontal",
      home: Scaffold(
        appBar: AppBar(title: Text("ListView widget horizontal")),
        body: Center(
          child: Container(
            height: 200.0,
            color: Colors.blueGrey,
            child: MyList()
          ),
        ),
      ),
    );
  }
}

class MyList extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return ListView(
      scrollDirection: Axis.horizontal, // 滑动方向:横向滑动
      children: <Widget>[
        Container(
          width: 180.0,
          color: Colors.red,
        ),Container(
          width: 180.0,
          color: Colors.greenAccent,
        ),Container(
          width: 180.0,
          color: Colors.lightBlueAccent,
        ),Container(
          width: 180.0,
          color: Colors.yellowAccent,
        ),Container(
          width: 180.0,
          color: Colors.deepPurpleAccent,
        ),
      ],
    );
  }
}
图片.png

动态列表

import 'package:flutter/material.dart';


void main()=>runApp(MyApp(
    items: new List.generate(1000, (i)=>"$i item text")
));

class MyApp extends StatelessWidget{

  final List<String> items;

  MyApp({Key key, @required this.items}):super(key:key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Widget'),
        ),
        body: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index){
                return ListTile(
                  title: Text(items[index])
                );
//              return Text(items[index]);
            }
        ),
      ),
    );
  }
}

动态列表

推荐阅读更多精彩内容

  • 官方英文原文: https://flutter.io/flutter-for-android/ 说明:此文上接 给...
    horseLai阅读 1,439评论 0 8
  • 1.Flutter简介 1.1.什么是Flutter Flutter是Google开发的一套全新的跨平台、开源UI...
    天然鱼阅读 1,309评论 2 14
  • 前天午休班内220两个男生吵嘴被通报,我还没来得及质问,寝室长森就找到我,给我说午休发生的事情经过。 大致就是他不...
    孟想飞洋_牛玉瑾阅读 25评论 0 1
  • 梁素红,焦点网络九期持续分享第332天(452)舞钢 今天有点累,感觉不想说什么,想起鲁迅的铁屋子的说法, 没有能...
    天高地阔心飞扬阅读 20评论 0 0
  • 我见男神多妩媚 料男神见我如屌丝 一想到男神呀 我这张丑脸上就泛出了笑意 一想到男神他 和我一样每天 都要刷牙洗脸...
    莫须有小姐Anna阅读 29评论 0 0