Flutter
计数器
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// build方法用于构建应用程序显示的内容
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'), // 设置主页
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
State<MyHomePage> createState() => _MyHomePageState(); // 创建状态对象
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++; // 点击按钮后使_counter自加1
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title), // 设置应用栏标题
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:', // 文本内容
),
Text(
'$_counter', // 显示_counter变量的值
style: Theme.of(context).textTheme.headline4, // 设置文本样式
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter, // 点击时执行 _incrementCounter 函数
tooltip: 'Increment',
child: const Icon(Icons.add), // 图标
),
);
}
}
React Native
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-elements';
export default function App() {
const [counter, setCounter] = useState(0); // 初始化计数器状态
const incrementCounter = () => {
setCounter(counter + 1); // 点击按钮后使计数器自加1
};
return (
<View style={styles.container}>
<Text style={styles.title}>You have pushed the button this many times:</Text>
<Text style={styles.counter}>{counter}</Text>
<Button title="Increment" onPress={incrementCounter} /> // 点击按钮执行incrementCounter函数
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
counter: {
fontSize: 50,
textAlign: 'center',
margin: 10,
},
});
package.json的dependencies添加
“react-native-elements”: “^3.4.3”
微信小程序
index.ts
// 定义页面数据类型
interface IndexData {
counter: number;
}
// 定义页面类型
interface IndexPage {
data: IndexData; // 页面数据
incrementCounter: () => void; // 更新计数器状态的方法
}
// 初始化页面数据
const pageData: IndexData = {
counter: 0,
};
// 初始化页面对象
const IndexPage: IndexPage = {
data: pageData, // 设置页面数据
incrementCounter() { // 定义更新计数器状态的方法
const { counter } = this.data; // 获取原有数据中的计数器值
this.setData({ counter: counter + 1 }); // 将新的计数器值更新到页面数据中
},
};
// 注册页面
Page(IndexPage);
index.wxml
<view class="container"> <!-- 容器视图 -->
<text class="title">You have pushed the button this many times:</text> <!-- 标题文本 -->
<text class="counter">{{counter}}</text> <!-- 计数器文本 -->
<button class="button" bindtap="incrementCounter">Increment</button> <!-- 设置计数按钮 -->
</view>
index.wxss
.container {
display: flex; /* 定义弹性盒子布局 */
flex-direction: column; /* 使用主轴从上到下(默认方向)*/
justify-content: center; /* 主轴上居中对齐 */
align-items: center; /* 交叉轴居中对齐 */
height: 100vh; /* 高度占满屏幕高度 */
}
.title {
font-size: 20px; /* 标题字体大小 */
text-align: center; /* 居中对齐 */
margin: 10px; /* 上下间距和左右间距边距 */
}
.counter {
font-size: 50px; /* 计数器字体大小 */
text-align: center; /* 居中对齐 */
margin: 10px; /* 上下间距和左右间距边距 */
}
.button {
margin-top: 30px; /* 距离容器视图的上边界的距离 */
padding: 10px 20px; /* 内间距 */
border-radius: 5px; /* 边框圆角 */
font-size: 16px; /* 按钮字体大小 */
color: #fff; /* 字体颜色 */
background-color: blue; /* 背景颜色 */
}