flutter 开启篇

最新推荐文章于 2024-12-09 04:14:56 发布

人生几何-

最新推荐文章于 2024-12-09 04:14:56 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter开发指南

本文链接：https://blog.csdn.net/qq_35629609/article/details/113879274

flutter开发指南专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Flutter的项目创建，通过命令行和Android Studio，并展示了如何编写HelloWorld程序。接着，讲解了命名可选参数和Material设计风格，包括Scaffold、AppBar和Text widget的使用，最后通过优化代码实现更优雅的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

flutter 是啥，以及环境，介绍性的很多东西在这里就不会阐述了，这篇文章主要还是以flutter实际开发为主。以androidStudio 作为主要开发工具

创建项目

使用命令行创建：项目名称：flutter_1

注意：项目名称不能包含特殊符号，也不能有大写字母

flutter create flutter_1

使用开发工具 android-studio

在这里插入图片描述
这两个plugins 是需要的

直接运行是这个效果

作为我们刚开始，这个示例代码我们就先不写了

Helloworld

编辑main.dart

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(new Text("Hello World", textDirection: TextDirection.ltr));
}

import 'package:flutter/material.dart'; 这一句是必须加的，这也是调用runApp()函数的类
main函数大家都知道后面的集合就是启动的入参，可以不加
runApp(Wdiget) 入参就是整个页面，你可以理解他为android布局中最外层的 LinnearLayout，或者网页中的 body>
可以用lamda 表达式
new 在 flutter 2.0之后可以省略
textDirection 需要制定字段名，因为他是命名可选参数源码如下，

class Text extends StatelessWidget {
const Text(
   String this.data, {//花括号里面的都是命名可选参数
   Key? key,
   this.style,
   this.strutStyle,
   this.textAlign,
   this.textDirection, // 排版  .ltr 从左边开始， .rtl,右边开始
   this.locale,
   this.softWrap,
   this.overflow,
   this.textScaleFactor,
   this.maxLines,
   this.semanticsLabel,
   this.textWidthBasis,
   this.textHeightBehavior,
 }) 
}

命名可选参数就是对顺序没有要求，可有可无，但是调用需要字段指定，跟ios的swift挺像

从textDirection 点进去就知道他要什么类型的参数了

简写

import 'package:flutter/material.dart';

main() => runApp(Text("Hello World", textDirection: TextDirection.ltr));

效果

在这里插入图片描述
连状态栏的地方都占了，ios 有统一的脚手架，android 有toolbar，那flutter呢？

有，继续看

Material设计风格

熟悉android的应该知道Material Design布局风格
material是Google公司推行的一套设计风格，设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等
在Flutter中高度集成了Material风格的Widget；
在Material的下面的widget 会是Material风格

import 'package:flutter/material.dart';
main() => runApp(
     MaterialApp( //Material设计风格
        home: Scaffold(  //脚手架
           appBar: AppBar(
                title: Text("这是个页面"),  //titlebar
           ),
           body: Text(
                "Hello World",  //正文
           ),
        )
    )
);

效果

在这里插入图片描述
ios

好起来了对不对

但是，代码太啰嗦了，且不好读

优雅一点

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //这个能去掉右上角的的debug 
      home: Scaffold(
        appBar: AppBar(
          title: Text("这是个页面"),
        ),
        body: MyBody(),
      ),
    );
  }
}

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center( //居中
        child: Text(
          "Hello World",
        ),
      );
  }
}