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

我会带着你远行 2021-07-24 18:33 483阅读 0赞

列表组件
    水平方向宽度自适应(自动填充满父容器)
    垂直方向高度自适应(自动填充满父容器)
    内部可以放置Column组件
    title和subTitle可以设置高度,设置后自动居中,可手动调整位置
    
    	ListView(
    		 children: <Widget>[   可以放置任意数量任意类型组件
    				...	
    			提供的ListTile组件可以设置qq看点的一级标题、二级标题和图片等内容
    				ListTile(
    					title:Text("这是标题") ,
    					subtitle:Text("这是二级标题"),
    					leading:在首部放置字体图标/图片,
    					trailing:在尾部放置字体图标
    				)
    		],
    		
    		scrollDirection: Axis.vertical,  //垂直列表默认
            padding: EdgeInsets.all(10),
            reverse: false,  //反向排列
            controller:控制器,
            	其中:控制器方法
            		声明: ScrollController xx=new ScrollController();
            		属性:
            			scroll.position.pixels  当前滚动坐标
            			scroll.position.maxScrollExtent  组件可滚动的最大坐标
            		方法
            			scroll.animateTo(当前位置竖直滚动的距离, duration: Duration(milliseconds: 滚动毫秒), curve: Curves.滚动方式);    自定义滚动
    )
    	
    利用选项生成动态列表的三种方式:
    因为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")形式
    		  }
    
    	方式二：直接在组件中写
              Column(
                children: this.list2.map((item){
                     	 return Text(item);
                  	}).toList()
         	 )
    
    (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]));
          },
    
        );
      }
    }
    
    /* */