Flutter入门——从简单的计数器demo入手

Flutter入门------从简单的计数器demo入手

前言

flutter是现如今很热门的跨平台开发框架,只需要一套代码就能在六个平台上运行,现在在移动端的应用比较成熟,本片文章会是Flutter的简单入门,从一个简单的demo入手分析

笔者是Android原生开发者,现在由于在实习时公司也需要使用flutter进行开发,接下来会把自己学习的学习心得记录下来,持续更新,main方法是程序的入口,在main方法中有runApp方法,这个方法需要传入Widget

demo的效果图

demo的具体解析

dart 复制代码
void runApp(Widget app) {
  final WidgetsBinding binding = WidgetsFlutterBinding.ensureInitialized();
  assert(binding.debugCheckZone('runApp'));
  binding
    ..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))
    ..scheduleWarmUpFrame();
}

Widget有两类,有状态的StatefulWidget和无状态的StatelessWidget

这里我们传入一个无状态的Widget,MyApp

dart 复制代码
void main() {
  runApp(const MyApp());
}

可以看到MyApp有一个const修饰,表示编译时常量,可以在编译时就能确定值,从而提高一点性能

看一下MyApp的代码:

dart 复制代码
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

继承StatelessWidget 表示这个Widget是无状态的Widget,还需要重写build方法,build方法中会返回一个Widget

接下来我们完成build方法的具体实现:

dart 复制代码
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true 
      ),
      home: MyHomePage(),
    );
  }
}

我们使用了一个MaterialApp,这个用来指定风格采用Android的风格,其中使用了title参数指定在手机的多任务管理中显示的名称

theme中自定了主题,这里设置了颜色,指定使用material3,这些属性都是在打开app后只加载一次的东西,所以我使用了无状态的Widget

在home中,是具体的页面是什么样,往往需要改变界面的状态,所以我使用了一个StatefulWidget,

dart 复制代码
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

在MyHomePage中,继承StatefulWidget表示它是一个有状态的Widget,其中需要重写createState方法,这个方法会返回一个State,我指定泛型为对应的MyHomePage,用了_MyHomePageState方法来写具体的实现,这里的=>是dart中的一个语法糖

在_MyHomePageState中,重写build方法,在build方法返回一个Widget,接下来我会具体实现build方法

dart 复制代码
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _number = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text(
            widget.title,
        ),
      ),
      body: Center(
        child: Column(
          children: [
            const Text('你已经点击了这么多次:'),
            Text('$_number', style: Theme.of(context).textTheme.headlineLarge,)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (() {
          _number++;
          setState(() {
          });
        }),
        child: const Icon(Icons.add),
      ),
    );
  }
}

在build方法中,我首先使用了一个脚手架Scaffold,可以看成是页面的一个抽象,其中主要有三个部分:顶部appBar,中间界面的主要内容body,底部导航栏bottomNavigationBar, 底部导航栏在这个demo中暂时不需要,之后再详细说

在Scafford的appBar参数中,我传入了AppBar,其中backgroundColor用于设定导航栏的背景颜色,title指定具体内容,这里我使用了一个Text,其中用到在MyHomePage中定义的变量title

dart 复制代码
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

在MyHomePage中我添加了类型为String的变量title,用于表示AppBar的标题内容,相应构造函数也需要改变,在this.title前面添加了required,表示这个参数是必须要传入的

在_MyHomePageState中,就可以通过widget.title得到在MyHomePage中定义的title变量。接下来,在Scafford的body中是界面的主要内容,我先用了个Center,让其中子Widget能够居中显示,它的子Widget用child指定,我传入了一个Column,让子Widget能够竖向排列,比较类似Android原生中的LinearLayout,children参数需要传入Widget数组,表示Column中多个子Widgt,我用了个Text提示点击次数,还添加了floatingActionButton,在onPressed中处理点击事件,在child中指定具体显示的内容,在onPressed中加入了setState方法用于触发更新,如果不调用这个,界面是不会更新的

flutter中是由数据驱动UI,响应式思维,有点类似与在原生中使用的MVVM架构,在数据更新后能自动更新UI,实际上在调用setState方法后,会重写指定build方法,所以没有调用的时候呢,即使数据改变,界面是不会发生改变的

运行一下,这个简单的计时器demo就做好啦

关注我,继续分享开发知识

相关推荐
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript