2022年6月12日

flutter基础教程(listview列表)

作者 admin


分享几个学习flutter的学习网站与资源

flutter实战第二版https://book.flutterchina.club/chapter6/gridview.html#_6-6-1-%E9%BB%98%E8%AE%A4%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0

flutter中文文档https://flutter.cn/docs/get-started/flutter-for/web-devs

main_ ho_Listview.dart

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:Center(
          child:Container(
            height:200.0,
            child:MyList()
            ),
          ),
        ),
      );
  }
}


class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          new Container(
            width:180.0,
            color: Colors.lightBlue,
          ), new Container(
            width:180.0,
            color: Colors.amber,
          ), new Container(
            width:180.0,
            color: Colors.deepOrange,
          ),new Container(
            width:180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
    );
  }
}

main_builder_listView.dart

import 'package:flutter/material.dart';
void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

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(
          body:new ListView.builder(
            itemCount:items.length,
            itemBuilder:(context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            }
          )
        ),
      );
  }
}

main_pic_listVIew.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: Text('wecome'),
        )
        body: Center(
          child: new ListView(
            children:<Widget>[
            new Image.network(
                'http://xxxx.com/static/upload/20181111/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'
              ),
              new Image.network(
                'http://xxxx.com/static/upload/20181109/1bHNoNGpZjyriCNcvqdKo3s6.jpg'
              ),
              new Image.network(
                'http://xxxx.com/static/myimg/typescript_banner.jpg'
              ),new Image.network(
                'http://xxxx.com/static/myimg/smile-vue.jpg'
              )

            ]
          ),
        )
      )
    )
  }
}