blog-web/Flutter初见.md at 7627681b1ef1c2825d7ad4f4f97a43fcb9618378

sookie/blog-web

Fork 0

结发受长生 7627681b1e container

2019-10-26 19:07:17 +08:00

4.4 KiB

Raw Blame History

title

date

搭建开发环境

下载解压Flutter的sdk，并且将其中的bin目录配置到环境变量
Android Studio安装安卓SDK，通常启动时如果未安装过都会自动执行下载安装

Android Studio安装Flutter的插件安装flutter插件时会自动安装其依赖的dart插件
在Android Studio的AVD Manager当中创建模拟器（需要选择屏幕尺寸以及安卓系统版本，当前系统中不存在的版本需要下载）如果使用真机调试运行，该步骤可以跳过

执行flutter doctor可以检验当前环境当中存在的问题可以看到IDEA也是支持的，但是我们不打算使用IDEA来进行开发，所以就不在IDEA当中安装插件了 No devices available代表还未启动虚拟机或者连接真机其余几项都是校验通过的

创建flutter项目

当Android Studio的flutter插件安装无误之后，就可以创建flutter项目了

新建的是一个flutter的demo项目包含一个标题栏，一个按钮，和中间区域内的若干文字点击按钮时进行计数，文字会相应变化

项目当中包含一个main.dart文件内容如下

// 引入material样式
import 'package:flutter/material.dart';
// 程序运行入口
void main() => runApp(MyApp());

// App实体类
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 主题样式
        primarySwatch: Colors.blue,
      ),
      // 首页对象以及首页的标题
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() { // 计数方法
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 标题栏
        title: Text(widget.title),
      ),
      body: Center( // 居中元素
        // 子元素
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text( 
              'You have pushed the button this many times:',
            ),
            Text( // 文字元素以及样式
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      // 浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 点击事件
        tooltip: 'Increment',
        child: Icon(Icons.add), // 子元素是一个图标
      ),
    );
  }
}

以上代码当中构建对象都省略了new关键字其中的每个对象都是一个组件（Widget）

常用组件

组件以及组件的一些属性，基本算是前端html和css的思想

Text组件

这是一个文本组件，可以用于在App当中显示文字

Text(
  '这是一段文字',
  textAlign: TextAlign.left, // 文本对齐方式(左对齐)
  maxLines: 3, // 最大显示行数
  overflow: TextOverflow.ellipsis, // 文本长度溢出的处理方式(显示为...)
  style: TextStyle(
    color: Color.fromARGB(255, 20, 130, 40), // 文字颜色
    fontSize: 20, // 字号大小
    decoration: TextDecoration.underline, // 下划线
    decorationStyle: TextDecorationStyle.solid // 下划线类型
  )
)

容器组件

就是Container类以及它的一些子类可以简单理解为div，通常用来方便控制布局

Container(
  child: Text(
    '这是一段文字',
    style: TextStyle(fontSize: 40),
  ),
  alignment: Alignment.bottomLeft, // 底部居左对齐
  color: Color.fromARGB(255, 50, 50, 50), //内部文字的颜色
  margin: EdgeInsets.fromLTRB(10, 20, 10, 30), // 左 上 右 下 
)

属性也都很容易理解，可以设置容器的宽高，内外边距等等

4.4 KiB Raw Blame History Unescape Escape