flutter 基础

入口标准代码

void main(){
      runApp(MyApp())
}

class MyApp extends StatelessWidget{
    @override
     Widget build(BuildContext context){
           return MaterialApp(
                home:Scaffold(
                    appBar:AppBar(title:Text("flutter demo"))
                ),
                body:Center(
                    child:Text("xxxx"),
                ) 
            );
     }
}          

Container 容器组件

  选项:值

  child:子组件

  height: dobule类型

  width:dobule类型

  padding:EdgeInsets.all(10) 四边边距  EdgeInsets.fromLTRB(10,10,10,10)左上右下

  margin:EdgeInsets.all(10) 四边边距  EdgeInsets.fromLTRB(10,10,10,10)左上右下

  transfom:Matrix4..translationVaues(100,0,0)  偏移 x,y,z

      Matrix4.rotationZ(0.3)  旋转

  alignment:Alignment.bottomLeft 内容对齐 /Alignment.bottomCenter /Alignment.topCenter  ........

  decoration:盒子装饰

    BoxDecoration()

    color:盒子背景颜色

    borderRadius:BorderRadius.all(   盒子圆角

      Radius:circular(8)

    )

    border: Border.all(

      color:边框颜色

      边框颜色

    )

      

text文本组件

  值

  textAlign:TextAlign.right 文字靠右     TextAlign.center 文字居中

  overflow:TextOverflow.ellipsis 超出省略

  textScaleFactor:2  字体放大

  maxLines:1  一行显示

  style:TextStyle:() 文字样式

    fontSize:16.0 文字大小

    color:文字颜色 Color.fromARGB(1,2,3,4)

    fontWeight:FontWeight.w300 字体加粗

    fontStyle:FontStyle.italic 字体倾斜

    decoration:TextDecoration.lineThrough  

    decorationColor:Color.white  穿过的线的颜色

    decorationStyle:TextDecorationStyle.dashed 虚线

    letterSpacing:5.0 字间距

ListView 列表组件 默认水平

  height:10设置高度

  padding:EdgeInsets.all(10) 加边距

  scrollDirection:Axis.horizontal垂直   

  children:<Widget>[]  子元素可以有多个

ListTile  列表的item组件 通常配合列表使用 可以做新闻列表

  title:Text("ssss")  标题

  leading:Icon(Icon.settings) 设置前面图标

        color:Color.red 设置图标颜色

        size:10 设置图标大

      Image.network("url") 设置图片

  trailing:Icon(Iocns.home)  在后面添加图标

  subtitle:Text("二级标题")  二级标题

  

原文地址:https://www.cnblogs.com/zs521/p/14659132.html