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: [
              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: [
            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: [
        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 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]);
            }
        ),
      ),
    );
  }
}

动态列表