Flutter组件总结

1.基础组件

1.1.Container

一个拥有绘制、定位、调整大小的 widget。

Container(  
    width: 300, //宽度
    height: 300, //高度  
    decoration: BoxDecoration(    
        borderRadius: BorderRadius.circular(5), //圆角    
        border: Border.all(width: 2.0, color: Colors.blueAccent //边框
        ),    
        color: Colors.green,  //颜色
    ),  
    alignment: Alignment.center,  //对齐方式
    padding: EdgeInsets.all(10),  //内边距    
    margin: EdgeInsets.all(10),   //外边距    child: Text('测试'),    //子组件
);
复制代码

1.2.Row

在水平方向上排列子widget的列表。

Row(  
    mainAxisAlignment: MainAxisAlignment.spaceBetween, //主队齐方式  
    crossAxisAlignment: CrossAxisAlignment.center, //竖对齐方式  
    children: [ //组件数组    
        Text('测试1'),    
        Expanded( //扩展组件      
            child: Text(        
                '测试2',        
                textAlign: TextAlign.center,      
            ),      
            flex: 1, //剩下的都是我的    
        ),    
        Text('测试3'),  
    ],
),
复制代码

1.3.Column

在垂直方向上排列子widget的列表。

Column(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主队齐方式  
    crossAxisAlignment: CrossAxisAlignment.center, //横对齐方式  
    children: [    //组件数组    
        Text('测试1'),    
        Text('测试2'),    
        Text('测试3'),  
    ],
),
复制代码

1.4.Image

一个显示图片的widget。

Column(  
    children: [    
        Image(      
            image: NetworkImage("网络图片"),      
            width: 100,      
            fit: BoxFit.fitWidth, //缩放模式    
        ),    
        ClipOval(   //圆角图片      
            child:  Image.asset(        
                '本地图片',        
                width: 100,        
                height: 100,        
                fit: BoxFit.contain,      
            ),    
        )  
    ],
),
复制代码

1.5.Text

单一格式的文本。

Text(  
    '测试',  
    textAlign: TextAlign.center,  //内容对齐方式
    overflow: TextOverflow.ellipsis,  //超出...
    style: TextStyle(   //字体类型  
        fontSize: 16,    
        fontWeight: FontWeight.bold,    
        fontFamily: '黑体',    
        color: Colors.blueAccent,  
    ),
),
Text.rich(TextSpan( //富文本    
    text: '测试',    
    style: TextStyle(fontWeight: FontWeight.bold),    
    children: <TextSpan>[      
        TextSpan(text: '富文本', style: TextStyle(fontSize: 16))    
    ]
)),
复制代码

1.6.Icon

系统设计的图标。

Icon(    
    Icons.favorite, //图标    
    color: Colors.pink, //图标颜色    
    size: 24, //图标大小  
),  
IconButton(    //图标按钮
    onPressed: () {      
        print('点击图标');    
    },    
    icon: Icon(Icons.add),  
),
复制代码

1.7.Button

带有不同属性的按钮。

ElevatedButton(  onPressed: () {},
    child: Text("elevateButton"),  
    style: ButtonStyle(    
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)), //字体大小    
    foregroundColor: MaterialStateProperty.all(Colors.white), //字体颜色    
    backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色    
    padding: MaterialStateProperty.all(EdgeInsets.all(20)), //内边距    
    shape: MaterialStateProperty.all(RoundedRectangleBorder(        //形状圆角        
        borderRadius: BorderRadius.circular(20))),    
    side: MaterialStateProperty.all(BorderSide(color: Colors.purple, width: 1)), //边框大小颜色    
    minimumSize: MaterialStateProperty.all(Size(200, 200)), //按钮大小  
),
复制代码

1.8.Scaffold

Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

Scaffold(  
    appBar: AppBar( //导航栏    
    title: Text("Flutter Demo"),  ),  
    body: Test(), //内容  
    backgroundColor: Colors.grey[100], //背景颜色  
    bottomNavigationBar: BottomNavigationBar( //底部栏    
        onTap: (index) {      
            print('点击的是第$index个');    
        },    
        currentIndex: 0,    
        items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),      
            BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),    
        ],  
    ),
);
复制代码

1.9.AppBar

一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。

AppBar(  //导航栏  
    title: Text("Flutter Demo"),  
    actions: [    
        Icon(Icons.add),    
        PopupMenuButton(  //弹出菜单      
            itemBuilder: (BuildContext context) {       
                 return [          
                    PopupMenuItem(child: Text('测试1'), value: '1号'),          
                    PopupMenuItem(child: Text('测试2'), value: '2号'),          
                    PopupMenuItem(child: Text('测试3'), value: '3号'),        
                ];      
            },      
            onSelected: (object) {        
                print(object);      
            },    
        ),  
    ],  
    backgroundColor: Colors.red,  
    foregroundColor: Colors.white,
),
复制代码

1.10.BottomNavigationBar

底部导航条，可以很容易地在tap之间切换和浏览顶级视图。

BottomNavigationBar(  //底部栏  
    onTap: (index) {    print('点击的是第$index个');  },  
    currentIndex: 0,  
    backgroundColor: Colors.pink, 
    selectedItemColor: Colors.yellow,
    unselectedItemColor: Colors.white,
    items: [    
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),    
        BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),  
    ],
),
复制代码

1.11.TabBar

一个显示水平选项卡的Material Design widget。

_tabController = TabController(length: 3, vsync: this);

TabBar(  
    tabs: [    
        Tab(icon: Icon(Icons.home)),    
        Tab(icon: Icon(Icons.send)),    
        Tab(icon: Icon(Icons.title)),  
    ],  
    controller: _tabController,
),
复制代码

1.12.TabBarView

显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。

_tabController = TabController(length: 3, vsync: this);

TabBarView(  
    children: [    
        Text('ceshi1'),    
        Text('ceshi2'),    
        Text('ceshi3'),  
    ],  
    controller: _tabController,
),
复制代码

后续待补充