flutter 有状态组件StatefulWidget、控制子组件高宽组件SiezedBox、标签组件Chip

ゝ一世哀愁。 2021-07-24 11:57 364阅读 0赞

有状态组件:
     能够动态改变数据状态
    	安装插件
    		Flutter Widget Snippets
    		Awesome Flutter Snippets
    	快捷键生成有状态和无状态组件:
    		 statefulw
    		 statelessw
    	改变状态(改变会会重新渲染):
    	   setState((){
    			 this.类的属性=值
    			}
    		)
    	获取第一个状态内的数据
    		widget.变量名获取
    	
    控制子组件高宽组件:
     也可以用来设置组件间的间距
     	SizedBox(
     		height,
     		width,
     		child:组件
     	)
     	其他类型的SizedBox组件
    		SizedBox.expand():  可以使SizedBox的大小充满parent的布局，相当于设置了SizedBox的宽度和高度为double.infinity(无穷大)。
    		SizedBox.fromSize():  创建一个指定Size的SizedBox
    		FractionallySizedBox():可以用百分比来控制sizebox的大小。 widthFactor，heightFactor参数就是相对于父控件的比例。 alignment：可以设置sizebox在父控件里面的相对位置。
    		SizedOverflowBox(): 通过设置Size，允许它的child控件，溢出它的父控件，进行绘制，不会报OverFlow的错误。
    		OverflowBox()： 通过设置最大最小的宽高，OverflowBox允许它的child控件，溢出它的父控件，进行绘制，不会报OverFlow的错误。
    		LimtedBox(): 一个可以限制子控件的最大宽高的控件，child只能在这区域内进行绘制
    
    标签组件
    	两边为半圆的标签矩形
    		Chip(
    			Key key,	
    		    avatar,  标签左侧Widget，一般为小图标，可以使用CircleAvatar来设置
    		   	label,   标签，设置标签内容
    		    labelStyle,
    		    labelPadding,
    		    deleteIcon,  删除的图标,标签最右侧
    		    onDeleted,  删除回调，为空时不显示删除图标
    		    deleteIconColor,  删除图标的颜色
    		    deleteButtonTooltipMessage,  删除图标位置长按时显示的信息
    		    shape,   形状.默认两端是半圆形
    		    clipBehavior = Clip.none
    		    backgroundColor,  背景颜色
    		    padding,
    		    materialTapTargetSize,  设置为MaterialTapTargetSize.shrinkWrap时，clip距顶部距离为0；设置为MaterialTapTargetSize.padded时距顶部有一个距离
    		)

代码示例:

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("hh")),
            body:Home2()
          )
          ,);
      }
    }
    
    class Home extends StatelessWidget { 
      const Home({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              SizedBox(height: 200,width: 200,child:Text('哈哈哈',textAlign: TextAlign.center)),
              Text("1")
            ],
          ),
        );
      }
    }
    class Home2 extends StatefulWidget { 
      Home2({ Key key}) : super(key: key);
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Home2> { 
      int num=0;
      @override
      Widget build(BuildContext context) { 
        return  Container(
          child: Column(
            children:<Widget>[
              Chip(
                label: Text(this.num.toString()),
              ),
              SizedBox(
                height: 20,
              ),
              RaisedButton(
                child: Text('按钮',style: TextStyle(color: Color(0xff00ff00)),),
                onPressed: (){ 
                    setState(() { 
                      this.num++;
                    });
                },
              ),
              Chip(
                      label: Text("课程"),
                      deleteIcon: Icon(Icons.cancel),
                      deleteIconColor: Colors.red,
                      deleteButtonTooltipMessage: "长按删除按钮显示这个信息",
                      onDeleted: (){ },
                      avatar: CircleAvatar(
                        backgroundColor: Colors.green,
                        child: Text("K"),
                      ),
                    )
            ],
          ),
        );
        
      }
    }