flutter入门到放弃
2023-08-17 本文已影响0人
xiaotimel
- flutter支持热更改
修改完成后按下保存或者Hot reload(闪电)会自动同步更新页面; - flutter view没有生命周期
view对应的widgets是不可变的,不能直接更新,要更新必须变更widget状态。简单来说就是用状态改变试图; - 更新view状态需要使用到StatelessWidget状态变更;
入口
Lib目录下main.dart main方法是最开始的入口

StatelessWidget和StatefulWidget区别
-
StatelessWidget(无状态组件):
StatelessWidget是一个不可变的组件,它的属性(即构造函数中传入的值)在组件创建后就不能再修改。
StatelessWidget通常用于表示那些不需要改变内部状态的简单UI元素。例如,静态文本、图标、按钮等。
StatelessWidget的build方法会在每次渲染时被调用,用于构建组件的UI。
由于StatelessWidget是不可变的,如果需要在用户操作或其他事件触发时更新UI,需要使用新的StatelessWidget实例来代替旧的组件。 -
StatefulWidget(有状态组件):
StatefulWidget是一个可变的组件,它持有一个可变的状态对象(State),该状态对象可以在组件的生命周期内发生变化。
StatefulWidget通常用于表示那些需要根据用户交互或其他事件而改变的UI元素。例如,表单输入、动态列表等。
StatefulWidget的build方法会在每次状态改变时被调用,用于构建组件的UI。
StatefulWidget通过与其关联的State对象来管理状态的变化,State对象可以在运行时修改。
入口页面
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(const SampleApp());
}
class SampleApp extends StatelessWidget{
const SampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,//主题颜色
),
home: const SampleAppPage(),
);
}
}
//页面
class SampleAppPage extends StatefulWidget{
const SampleAppPage({super.key});
@override
State<SampleAppPage> createState() {
return _SampleAppPageState();
}
}
class _SampleAppPageState extends State<SampleAppPage>{
String textShow = "你是猪";
int clickTimes = 0;
//点击触发事件
void _onPressed(){
clickTimes++;
setState(() {
textShow = "点击了$clickTimes";
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:const Text('page app bar')
),
body: Center(child: Text(textShow),),
floatingActionButton: FloatingActionButton(
onPressed: _onPressed,
tooltip: 'update text',
child: const Icon(Icons.update),
),
);
}
}