Flutter之基本组件

Flutter

1、介绍

作为谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，其目标是使同一套代码同时运行在iOS和Android系统上，并且拥有媲美原生应用的性能，使其App在细节处看起来更像原生应用。

flutter 下载地址

2、HelloWorld

• 项目入口文件 main.js

• 启动方法 void main()

  //定义入口方法
  void main(){} 
  

• 根函数 runApp()

  void main(){
    runApp(
      //定义内容
    );
  }
  

• 完整代码
  创建 home.dart，引入 main.dart

  import 'package:flutter/material.dart';
  import 'package:csdn_flutter/pages/home/index.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'MooZiXiao Flutter',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      );
    }
  }
  

• 一切皆为widget(组件)

  • 在 Flutter 中，一切的显示都是 Widget 。Widget 是一切的基础

  • Widget 和 Widget 之间通过 child: 进行嵌套。

  • 你需要做的就是在 widget 中堆积你的布局

• UI库 material

  import 'package:flutter/material.dart';
  

• Material 是一种标准的移动端和web端的UI框架，是一套google的设计规范，flutter项目以meterial为基础。

常用组件

• Scaffold
  appBarScaffold顶部
  backgroundColor背景色
  body内容区域
  bottomNavigationBar底部导航栏
  floatingActionButton浮动body的按钮
  floatingActionButtonLocation设置floatingActionButton的位置
  drawer侧边栏
  如（底部tabBar）：

  import 'package:flutter/material.dart';
  import 'package:csdn_flutter/tabPage1.dart';
  import 'package:csdn_flutter/tabPage2.dart';
  import 'package:csdn_flutter/tabPage3.dart';
  import 'package:csdn_flutter/tabPage4.dart';
  
  void main() => runApp(MyApp());
  List<Widget> tabList = [Page1(), Page2(), Page3(), Page4()];
  
  List<BottomNavigationBarItem> itemContent = [
    BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home)),
    BottomNavigationBarItem(title: Text('搜索'), icon: Icon(Icons.search)),
    BottomNavigationBarItem(title: Text('新闻'), icon: Icon(Icons.info)),
    BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.account_circle)),
  ];
  int _selectedIndex = 0;
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
    void _onItemTapped(int index) {
      setState(() {
        _selectedIndex = index;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title:
                // 可以加入自定义组件的放在头部
                Text(
              'hello',
              style: TextStyle(color: Colors.black),
            ),
            backgroundColor: Colors.white,
            centerTitle: true,
            elevation: 0.0,
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
          floatingActionButton: FloatingActionButton(
            onPressed: null,
            child: Text('按钮'),
          ),
          body: tabList[_selectedIndex],
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            items: itemContent,
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.green,
            onTap: _onItemTapped,
          ),
          drawer: Drawer(
            //边栏插件
            child: ListView(
              //构建列表
              children: <Widget>[
                //列表项
                DrawerHeader(
                  //边栏头部
                  child: Text('头部'), //头部文字
                  decoration: BoxDecoration(
                    //头部装饰
                    color: Colors.blue, //背景颜色
                  ),
                ),
                ListTile(
                  //列表项
                  title: Text(
                    //列表项标题
                    '列表', //列表项文字
                    textAlign: TextAlign.left, //文字对齐方式
                  ),
                  leading: Icon(Icons.message), //列表小图标
                  trailing: Icon(Icons.arrow_right),
                  onTap: () {}, //点击动作
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  
  

• 容器
  Container
  设置尺寸 width height
设置padding
设置margin
设置color
decoration容器装饰

  Center

  如：

  Container(
      width: 200.0,
      height: 200.0,
      padding: EdgeInsets.all(10.0),
      margin: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
          color: Colors.redAccent,
          border: Border(
          left: BorderSide(
              color: Colors.black,
              width: 3,
              style: BorderStyle.solid
          )
  	),
      // borderRadius: BorderRadius.circular(10.0)
      ),
      child: ...
  )
  Row(
      children: <Widget>[
        // 
        Expanded(
          child: Text('hello'),
        ),
        Container(
          width: 66.0,
          color: Colors.redAccent,
          child: Text('hello'),
        ),
  ],
  

• 文字组件
  Text
  RichText
  TextSpan
  style 文字样式
maxLines 行数
overflow 溢出处理

  如：

  Text(
      'Hello World',
      style: TextStyle(
          color: Colors.white,
          fontSize: 24.0,
  	),
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
  )
  

• 布局组件
  Row 设置水平对齐组件
  Cloumn 设置垂直对齐组件
  Expanded
  Flexible
  Wrap流式布局

  如：

  Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      // Expanded(
      //   flex: 1,
      //   child: Text('hello'),
      // ),
      Container(
        width: 66.0,
        color: Colors.redAccent,
        child: Text('hello'),
      ),
    ],
  )
  

• 按钮
  FloatingActionButton浮动按钮
  FlatButton文字按钮
  RaisedButton带效果的按钮
  OutlineButton边框按钮

  如：

  Row(
    children: <Widget>[
      RaisedButton(
        child: Text('按钮'),
        onPressed: () {},
        splashColor: Colors.black12,
        elevation: 0.0,
      ),
      RaisedButton.icon(
        icon: Icon(Icons.arrow_right),
        label: Text('按钮'),
        onPressed: () {},
        splashColor: Colors.grey,
        elevation: 10.0,
      ),
    ],
  ),
  

• 文本框组件
  TextField

  TextField(
    onChanged: (val) {
      print('onChange：' + val);
    },
    onSubmitted: (val) {
      print('onSubmitted' + val);
    },
    decoration: InputDecoration(
      icon: Icon(Icons.account_circle),
      labelText: '帐号',
      hintText: '请输入',
      border: InputBorder.none,
      // border: OutlineInputBorder(),
      filled: true,
    ),
  );
  

• 其他组件
  固定宽高比组件AspectRatio

  AspectRatio(
    aspectRatio: 12.0 / 5.0,
    child: Container(
      color: Colors.black12,
    ),
  );
  

  层叠堆放组件Stack

  Stack(
    alignment: Alignment.topLeft,
    children: <Widget>[
      Container(
        // 第一个子组件在最下面
        decoration: BoxDecoration(
          color: Colors.blueGrey,
          borderRadius: BorderRadius.circular(5.0),
        ),
      ),
      Positioned(
        //做层叠定位的组件
        right: 20.0,
        bottom: 20.0,
        child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0),
      ),
      Positioned(
        right: 40.0,
        bottom: 60.0,
        child: Icon(Icons.ac_unit, color: Colors.white, size: 18.0),
      ),
    ],
  );
  

  固定尺寸组件SizedBox
  水平分割线组件Divider
  列表行组件ListTile

  ListTile(
    title: Text('我的信息'),
    subtitle: Text('mydata'),
    leading: Icon(Icons.account_box),
    trailing: Icon(Icons.arrow_right),
    onTap: (){
      print('按下了我的信息');
    },
  );
  

  Tag标签组件 Chip
  头像组件 CircleAvatar

  如：

  Container(
    child: Row(
      children: <Widget>[
        Chip(
          label: Text('Tag'),
          backgroundColor: Colors.orange,
        ),
        CircleAvatar(
          backgroundColor: Colors.grey,
          child: Text('circle'),
        ),
      ],
    )
  );
  

  GestureDetector添加事件点击
behavior: HitTestBehavior.opaque,

  Row(
      children: <Widget>[
        GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, '/login');
          },
          child: Text(
            '登录',
            style: loginAndRegisterStyle
          ),
        ),
        Text(
          '/',
          style: loginAndRegisterStyle
        ),
        GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, '/register');
          },
          child: Text(
            '注册',
            style: loginAndRegisterStyle
          ),
        )
      ],
    )