flutter widget 控件

flutter widget控件

学习路径

be54a13a.png

1.widget

在flutter中UI控件就是wiget 一个wiget 可以是文本，按钮，图片，在页面中相当于树形结构widget 嵌套 widget 跟ReactNative 非常的相似

2.入口，包管理文件

flutter 项目的入口是main.dart 文件里面

void main() => runApp(StateFullGroup());

flutter 是通过项目根目录下的pubspec.yaml 进行管理
flutter packages 这个网址来进行查询flutter的应用包
这个网址下面有使用方法和安装方式

3.StatelessWidget 及基础组件

1. StatelessWidget： 无状态不需要状态来改变的widget，里面包含的是不需要根据状态来进行渲染
2. Text：该 widget 可让创建一个带格式的文本。相当于TextView
3. AppBar ： 页面导航
4. MaterialApp： 设置app的主题和title
5. home ： 设置主要页面

class LessGroupPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   TextStyle textStyle = TextStyle(fontSize: 20); // 设置导航页面
   return MaterialApp(  // 这个继承 StatefulWidget 是用来设置App
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: Scaffold( // 设置页面
       appBar: AppBar(title: Text('StatelessWidget与基础组件 ')), //设置导航
       body: Container( 
         decoration: BoxDecoration(color: Colors.red),// 页面装饰器 这里设置的背景颜色
         alignment: Alignment.center, // 设置居中
         child: Column( // 纵向布局 还有 Row 横向布局
           children: <Widget>[
             Text('I am text',
               style: textStyle,
             ),
             Icon(
               Icons.android,
               size: 50,
               color: Colors.white,
             ),
             CloseButton(), //关闭按钮
             BackButton(),   // 返回按钮
             Chip(
               avatar: Icon(Icons.android),
               label: Text("这是一尺chip",style: textStyle,),
               deleteIcon: Icon(Icons.phone)
               ,)   //这是一个Machdesign 设计
           ],
         ),
       ),
     )
   );
 }
}

4.StatefullWidget 及基础组件

StatefullWidget 可以根据状态来进行改变的组件

import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
import 'package:fluttertoast/fluttertoast.dart';


class StateFullGroup extends StatefulWidget {
 @override
 _StateFullGroupState createState() => _StateFullGroupState();
}

class _StateFullGroupState extends State<StateFullGroup> {
 int _currentIndex = 0;
 @override
 Widget build(BuildContext context) {
   TextStyle textStyle = TextStyle(fontSize: 20);
   return MaterialApp( // 材料设计组件 允许设置app 包括侧边栏
       title: 'Flutter Demo',//设置title
       theme: ThemeData( //设置主题
         primarySwatch: Colors.blue,
       ),
       home: Scaffold( //主页面 Scaffold是一个完整的页面
         appBar: AppBar(title: Text('StatefulWidget与基础组件 ')), // 设置 appBar
         bottomNavigationBar: BottomNavigationBar(
           currentIndex: _currentIndex, //记录下标
             onTap: (index){
               setState(() {
                 _currentIndex = index; //通过下标来改变页面
               });
             },
             items: [
         BottomNavigationBarItem( // 设置底部导航
           icon: Icon(Icons.home,color: Colors.black,),
           activeIcon: Icon(Icons.home,color: Colors.blue,),
           title: Text('首页')
       ),
           BottomNavigationBarItem(// 设置底部导航
             icon: Icon(Icons.list, color: Colors.black,),
             activeIcon: Icon(Icons.list,color: Colors.blue,),
             title: Text('列表'),

           ),

         ]), //设置底部按钮
         floatingActionButton: FloatingActionButton( // 浮动按钮
           onPressed: (){ // 点击事件
//              Fluttertoast.showToast(msg: "toast message");
           },
           child: Text("floating"),),//设置悬浮按钮
         body: _currentIndex == 0 ? Container( // 通过不同的下标返回不同的container
           decoration: BoxDecoration(color: Colors.red),//装饰器
           alignment: Alignment.center,
           child: Column(
             children: <Widget>[
               Container(
                 height: 100,
                 margin: EdgeInsets.only(top: 10),
                 decoration: BoxDecoration(color: Colors.blue,),
                 child: PageView(
                   children: <Widget>[
                     _item('Page1',Colors.green),
                     _item('Page2',Colors.green),
                     _item('Page3',Colors.green),
                   ],
                 ),
               )
             ],
           ),
         ):RefreshIndicator(//通过setState  来进行页面的切换 进行刷新列表
             child: ListView(
               children: <Widget>[
                 Text('下拉刷新listview')
               ],
             ), onRefresh: _handrefrensh),
       )
   );

 }

 Future<Null> _handrefrensh() async{ //
   await Future.delayed(Duration(milliseconds: 200));
   return null;
 }

 _item(String s, Color green) {
   return Container(
     alignment: Alignment.center,
     decoration: BoxDecoration(color: green),
     child: Text(s,style:TextStyle(fontSize: 20,color: Colors.white),),
   );
 }
}