iOS转向Flutter学习日记

最新推荐文章于 2026-06-15 20:32:25 发布

原创最新推荐文章于 2026-06-15 20:32:25 发布 · 852 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Flutter 专栏收录该内容

2 篇文章

订阅专栏

这篇博客记录了作者从iOS转向Flutter的学习过程，包括Flutter的安装、Dart语言的学习、Widget的使用，特别是如何创建状态可变和不可变类型的Widget。作者通过创建一个带有导航栏和列表的HomePage，展示了如何使用Scaffold和ListView，并提到Flutter的快速运行优势。后续内容将涉及更多Flutter开发中的网络请求、异步处理、模型转换以及iOS中常见功能的实现。

1，flutter的安装和创建

这个可以去掘金专栏或flutter中文网这里不再赘述，附网址：掘金：https://juejin.im/post/5b631d326fb9a04fce524db2#heading-1，flutter中文网：https://flutterchina.club/

2，关于开发语言，Dart语言还是挺好学的，光看文档的语法大概也能知道怎么用如能抽出时间去学Dart进度更快。

3，最常见的Widget 类似于Viewcontroller和NSObject和UIView的结合体，它包含了已经做好的视图样式，包括带导航栏的控制器Scaffold，带tabbar的控制器Tabbar等。还有显示文本的控件叫Text 显示图片的Image等等，它又包含了动画绘制，手势交互，滚动的listView，事件的处理等框架的集成，可以说涵盖了OC里的Foundation很多功能和UIKit的很多功能，所以说它是上述3个的结合体，凡创建视图产生交互等等的处理的类都属于Widget，

4，创建类的时候分状态可变和不可变类型，通常用简写即可创建，创建statefulClass的时候直接敲stf 创建stateless的时候直接敲stl回车即可，之后补写类名

5，main.dart文件是程序入口，相当于main.m，进入根视图方法如下：

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

MyApp就是一个控制器的类名，这句话让APP启动之后进入MyApp的视图里。

6，进入主页，我这里让MyApp值当成一个中转站，目的是进入HomePageViewController，这里叫做homePage，homepage里加载一个列表，就是tableview，里面有很多个cell cell上下一段文字，加载一张网络图片，就这么一个需求：

import 'package:flutter/material.dart';
import 'package:testdemo/homepage.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: HomePage(),);
  }
}

当然之前已经创建好了homepage.dart文件，是空的，下面来写这个类

7，进入homepage，敲stf创建一个class 名为HomePage：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return ;
  }
}

创建好之后return后面需要你返回一个组件，给这个页面使用更新state，因为我们需要一个导航栏，一个view，所以我使用了scaffold和一个listView

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text("98765"),
      ),
      body: new ListView.builder(
        itemBuilder: (context,index){
          return new PageItem();
        },
        itemCount: 20,
      ),
    );
  }
}

scaffold在new之后的（）里是赋值它的各个属性，具体有什么属性需要Ctrl+左键点进去看，一个视图正常当然有背景色，宽高，间距等等这些属性，作为已经封装完成给我们直接用的scaffold更多了几个导航的属性，可以看到叫做appbar的就是了。body就是这个视图的显示部分，我们初始化一个listview放进来，调用两个属性itemBuilder和itemCount,熟悉tableview的同学都知道，这就是tableviewdelegate的两个方法，cellforrow和numberofcell，是不，而itembuiler里面返回的pageItem就是每一个自定义的cell了

8，具体的pageItem：

class PageItem extends StatefulWidget {
  @override
  _PageItemState createState() => _PageItemState();
}

class _PageItemState extends State<PageItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
       ///卡片包装
      child: new Card(
           ///增加点击效果
          child: new FlatButton(
              onPressed: (){print("点击了哦");},
              child: new Padding(
                padding: new EdgeInsets.only(left: 0.0, top: 10.0, right: 10.0, bottom: 10.0),
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ///文本描述
                    new Container(
                        child: new Text(
                          "这是一点描述",
                          style: TextStyle(
                            color: Colors.blue,
                            fontSize: 14.0,
                          ),
                          ///最长三行，超过 ... 显示
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                        ), 
                        margin: new EdgeInsets.only(top: 6.0, bottom: 2.0),
                        alignment: Alignment.topLeft),
                    new Padding(padding: EdgeInsets.all(10.0)),
                    ///三个平均分配的横向图标文字
                    new Row(
                      children: <Widget>[
                        new Icon(
                          Icons.star,
                          size: 16,
                          color: Colors.grey,
                        ),
                        new Image(
                            image: NetworkImage("https://yiqi-shenyang-test.oss-cn-beijing.aliyuncs.com/uploads/images/20191014/a6ead9d011a87ec96f32ad152173ebcf.jpg"),
                            height: 70,
                            fit: BoxFit.fitWidth,
                            filterQuality: FilterQuality.high,
                            alignment: Alignment.center,
                          ),
                      ],
                    ),
                  ],
                ),
              ))),

    );
  }
}

上面的代码就是向item内填充各个视图的代码，视图就是一个一个的图层堆上去的，这种的代码虽然量大但是比较容易理解。

这样你可以直接点IDE的⚡️图标直接运行了，效果如图：