flutter 列表组件ListView、字体图标组件Icon

列表组件
水平方向宽度自适应(自动填充满父容器)
垂直方向高度自适应(自动填充满父容器)

	ListView(
		 children: <Widget>[   可以放置任意数量任意类型组件
				...	
			提供的ListTile组件可以设置qq看点的一级标题、二级标题和图片等内容
				ListTile(
					title:Text("这是标题") ,
					subtitle:Text("这是二级标题"),
					leading:在首部放置字体图标/图片,
					trailing:在尾部放置字体图标
				)
		],
		
		scrollDirection: Axis.vertical,  //垂直列表默认
        padding: EdgeInsets.all(10),
        reverse: false,  //反向排列
)

利用选项生成动态列表的三种方式:
因为children接收一个类型为widget的数组

(1)利用for循环

  List<Widget> _getdata(){
	List<Widget> list =new List(); 
    for(int i=0;i<=20;i++)
    {
      list.add( 
        ListTile(
        title:Text('啊哈哈')
        ),
      );
    }

    return list;
  }
(2)利用map循环

  List<Widget> _getdata2(){
    
    List list=["a","b","c"];
   
    var temp=list.map((value){
      return ListTile(title: Text(value));
    });  //也可以直接在类中使用,末尾要toList()转换

    return temp.toList();  map返回的("xx","xx")形式
  }

(3)利用自带的ListView.builder,
	  @override
	  Widget build(BuildContext context) {
	   
	    return ListView.builder(
	      itemCount: this.list.length,  数组长度
	      itemBuilder: (context,index){
	          return ListTile(title:Text(this.list[index]));
	      },
	
	    );

图标组件:
	Icon(
		Icons.图标名称,
	    this.size,  大小
	    this.color, 颜色
	    this.semanticLabel,
	    this.textDirection,  布局
	)

代码示例:

import 'package:flutter/material.dart';

void main(){
  runApp(App());
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(title:Text('aa')),
        body:Home()
        )
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[ //可以放置任意数量任意类型组件
        ListTile(leading:Icon(Icons.settings),title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题"),trailing:Icon(Icons.settings) ,),
        ListTile(leading:Image.asset("images/2.0x/钢铁侠4.jpg"),title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
        ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),

        Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
        Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
        Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
        Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
      ]
      ,
        scrollDirection: Axis.vertical,  //垂直列表默认
        padding: EdgeInsets.all(10),
        reverse: false,  //反向排列
      );
  }
}

import 'package:flutter/material.dart';

void main(){
  runApp(App());
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(title:Text('aa')),
        body:Home2()
        )
    );
  }
}

class Home extends StatelessWidget{

  List<Widget> _getdata(){

   List<Widget> list =new List(); 

    for(int i=0;i<=20;i++)
    {
      list.add( 
        ListTile(
        title:Text('啊哈哈')
        ),
      );
    }

    return list;
  }

  List<Widget> _getdata2(){
    
    List list=["a","b","c"];
   
    var temp=list.map((value){
      return ListTile(title: Text(value));
    });

    return temp.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getdata2()
      ,
        scrollDirection: Axis.vertical,  //垂直列表默认
        padding: EdgeInsets.all(10),
        reverse: false,  //反向排列
      );
  }
}

class Home2 extends StatelessWidget{

  List list=["a","b","c","d"];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context,index){
          return ListTile(title:Text(this.list[index]));
      },

    );
  }
}

/*

 */
发布了670 篇原创文章 · 获赞 4 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105466412