从React Native,Flutter到小程序(四) 有状态窗口

Flutter

计数器

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  // build方法用于构建应用程序显示的内容
  @override
  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;
  @override
  State<MyHomePage> createState() => _MyHomePageState(); // 创建状态对象
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
   
      _counter++; // 点击按钮后使_counter自加1
    });
  }

  @override
  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;     /* 背景颜色 */
}