官网

Flutter开发手册网址如下

Flutter SDK下载

下载地址
第一步:进入官网,选择自己相对应的系统

第二步:选择对应版本SDK并下载到本地

创建Flutter项目

第一步:打开AndroidStudio,选择New Flutter Project -> 然后在Flutter SDK path填入刚才所下载的SDK地址 -> next

第二步:
填入项目名称、项目地址、项目类型、Android和IOS的开发语言以及需要跨平台的平台

在ios上运行

第一步:当创建完成后,系统会自动有一个默认项目,如果需要在使用iOS模拟器或者iphone真机上运行,需要打开XCode,将自己的电脑和xcode绑定,第一次连接iphone真机时,还需在手机上点击信任此链接

第二步:绑定成功后,点击AndroidStudio如下链接,会跳转到xcode

第三步:添入自己的appid与本机进行绑定,只需一次即可

第四步:在xcode点击运行即可看见第一个项目,也可选择创建虚拟机,后续在Android Studio中打开虚拟机即可,无需运行xcode

第一个Flutter项目

删掉原有的代码,先按例子入门敲Hello World!

效果图

代码

AppBar:为顶部标题栏属性
Center: 为居中布局

Text属性 解释
style 文本样式
textAlign 文字对齐方式
overflow 内容溢出
maxLines 最大行数
TextStyle属性 解释
fontSize 文字大小
color 文字颜色
decoration:TextDecoration 下划线类型
decorationStyle 下划线样式

部分代码如下:

Widget build(BuildContext context) {
      return Scaffold(
      appBar: AppBar(
          title: Text(widget.title)
      ),
      body:  const Center(
        child: Text(
          "Hello World,My name is Sun Zheng Yi,This is first contact flutter to me",//文字内容
          textAlign: TextAlign.center,//文字居中
          maxLines: 1,//最大行数
          overflow: TextOverflow.ellipsis,//溢出部分显示...
          style: TextStyle(
            fontSize: 20,
            color: Color.fromARGB(255, 255, 0, 0),
            // color: Colors.red,
            decoration:TextDecoration.underline,//给每一行文字添加下划线
            decorationStyle: TextDecorationStyle.solid,//下划线样式,Draw a solid line
          ),
        ),
      ),
    );
  }

总结

对于原生开发的我而言,dart与Java和Kotlin存在很大区别,其次不是通过XML去进行视图展示,跟Web的js和ts有更多相似之处,但优点不言而喻,毕竟是风口上的产物

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐