从React Native,Flutter到小程序(五)基本控件

基本控件一般包含文本，按钮，图片，输入框，表单等。

React Native Text

import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";

const TextInANest = () => {
  const [titleText, setTitleText] = useState("Bird's Nest");
  const bodyText = useState("This is not really a bird nest.");

  const onPressTitle = () => {
    setTitleText("Bird's Nest [pressed]");
  };

  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        {titleText}
        {"\n"}
        {"\n"}
      </Text>
      <Text numberOfLines={5}>{bodyText}</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

在上述代码中，我们使用了 React Native 提供的 Text 和 StyleSheet 组件，并使用 useState Hooks 来创建状态变量和更新方法。

我们将整个组件用基础样式 baseText 包裹，并对标题文本 titleText 应用特殊样式。当用户点击标题文本时，会调用 onPressTitle 方法来更新标题文本的内容。

最后，我们单独定义了两个样式规则：baseText 和 titleText，并使用 StyleSheet.create 方法创建 styles 对象来存储它们。

Flutter Text

创建了一个名为 TextInANest 的有状态组件，并将标题和正文文本保存在两个字符串变量 _titleText 和 _bodyText 中。通过调用 setState() 方法，我们可以更新 _titleText 变量并重新渲染组件。

import 'package:flutter/material.dart';

class TextInANest extends StatefulWidget {
  @override
  _TextInANestState createState() => _TextInANestState();
}

class _TextInANestState extends State<TextInANest> {
  // 初始化标题文本设置为 "Bird's Nest"
  // 定义一个保存标题文本的变量
  String _titleText = "Bird's Nest";

  // 初始化正文文本设置为 "This is not really a bird nest."
  // 定义一个保存正文文本的变量
  String _bodyText = "This is not really a bird nest.";

  // 当标题文本被点击时执行该方法，更新标题文本
  void _onPressTitle() {
    setState(() {
      _titleText = "Bird's Nest [pressed]";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          // 将标题文本单独作为一个 Text 组件，并应用我定义的样式规则 titleTextStyle
          TextSpan(
            text: '$_titleText\n\n',
            style: titleTextStyle,
            recognizer: TapGestureRecognizer()..onTap = _onPressTitle,
          ),

          // 将正文文本单独作为一个 Text 组件，并应用我定义的样式规则 bodyTextStyle
          TextSpan(
            text: _bodyText,
            style: bodyTextStyle,
          ),
        ],
      ),
    );
  }
}

final titleTextStyle = TextStyle(
  // 设置字体
  fontFamily: 'Cochin',

  // 设置标题文本的样式属性
  color: Colors.red, // 标题字体颜色为红色
  fontSize: 20,
  fontWeight: FontWeight.bold,
);

final bodyTextStyle = TextStyle(
  // 设置字体
  fontFamily: 'Cochin',

  // 设置正文文本的样式属性
  color: Colors.blue, // 正文字体颜色为蓝色
  fontSize: 16,
);

在上述 Flutter 代码中，我们使用了 Text.rich 组件来实现不同样式的标题和正文文本。它接受一个 TextSpan 对象作为参数，该对象包含一组子节点，每个节点都可以应用自己的样式规则。

我们定义了 titleTextStyle 和 bodyTextStyle 来分别设置标题和正文组件的样式规则，并在 TextSpan 中使用它们的样式来应用样式规则。

注意，在这里，我们将标题文本与正文文本分别添加到单独的 TextSpan 中，以便我们可以为它们分别应用不同的样式规则，而不是将它们放在同一行中并使用相同的样式。同时，我们仍然使用手势检测器将点击事件添加到 _titleText 上并调用 _onPressTitle 方法。

微信小程序 Text

<rich-text class="baseText">
  <text class="titleText" bindtap="onPressTitle">{{ titleText }}</text>
  <text>{{ '\n\n' }}</text>
  <text>{{ bodyText }}</text>
</rich-text>

Page({
  data: {
    titleText: "Bird's Nest",
    bodyText: "This is not really a bird nest.",
  },

  onPressTitle() {
    this.setData({ titleText: "Bird's Nest [pressed]" });
  },
})

.baseText {
  font-family: 'Cochin', 'Arial';
}

.titleText {
  font-size: 20px;
  font-weight: bold;
  color: red;
}

React Native Button

import React from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
import Constants from 'expo-constants';

const Separator = () => {
  return <View style={styles.separator} />;
}

// 应用程序的主要组件
const App = () => {
  return (
    // 安全视图，确保显示不受操作系统或设备的限制。
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>
           文本标题说明，该组件必须具有title和onPress参数。建议设置accessibilityLabel属性以帮助所有人同时使用您的应用程序。
        </Text>

        // 按钮节点，当用户点击该按钮时调用 onPress 函数
        <Button
          title="Press me" // 按钮上的文字
          onPress={() => Alert.alert('Simple Button pressed')} // 点击函数
        />
      </View>

      <Separator /> // 分隔线组件，用于界面结构规整

      <View>
        <Text style={styles.title}>
           将颜色适当地调整到每个平台上看起来标准的方式。在iOS平台上，可以使用color属性控制文本颜色；在Android平台上，color属性控制按钮的背景颜色。
        </Text>
        <Button
          title="Press me"
          color="#f194ff" // 设置按钮背景颜色（在 iOS 上调整文本颜色）
          onPress={() => Alert.alert('Button with adjusted color pressed')}
        />
      </View>

      <Separator />

      <View>
        <Text style={styles.title}>
          // 禁止与该组件的所有交互。
        </Text>
        <Button
          title="Press me"
          disabled // 按钮失效，用户无法点击
          onPress={() => Alert.alert('Cannot press this one')}
        />
      </View>

      <Separator />

      <View>
        <Text style={styles.title}>
           此布局策略允许标题定义按钮的宽度。
        </Text>

        // 将两个按钮在横向排列，并将它们左右分别放置。
        <View style={styles.fixToText}>
          <Button
            title="Left button"
            onPress={() => Alert.alert('Left button pressed')}
          />
          <Button
            title="Right button"
            onPress={() => Alert.alert('Right button pressed')}
          />
        </View>
      </View>
    </SafeAreaView> // 结束安全视图
  );
}

// 样式表
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight, // 顶部状态栏高度偏移量
    marginHorizontal: 16, // 容器水平边距
  },
  title: {
    textAlign: 'center', // 居中对齐文本
    marginVertical: 8, // 垂直方向外边距
  },
  fixToText: {
    flexDirection: 'row', // 行排布
    justifyContent: 'space-between', // 两端对齐
  },
  separator: {
    marginVertical: 8, // 垂直方向外边距
    borderBottomColor: '#737373', // 分隔线的下边缘颜色
    borderBottomWidth: StyleSheet.hairlineWidth, // 分隔线粗细：StyleSheet.hairlineWidth 表示继承自设备像素密度
  },
});

export default App; // 导出组件

Flutter Button

Flutter 中有几种不同类型的 Button（按钮）。以下是其中几种：

RaisedButton
RaisedButton 是一个带有阴影和可自定义背景颜色的 Material Design 风格按钮。它通常会引起用户的注意，因为它看起来像是浮在 UI 应用程序之上的一张纸片。

RaisedButton(
onPressed: () {},
child: Text(‘Raised Button’),
);
FlatButton
FlatButton 是没有边框但可以自定义背景和字体颜色的按钮。虽然它不能像 RaisedButton 那样提供一个实际的立体效果，但仍然可以让应用程序显得更加简洁明了。

FlatButton(
onPressed: () {},
child: Text(‘Flat Button’),
);
OutlineButton
OutlineButton 是一个有边框但没有填充颜色的按钮。它也可以自定义边框和字体颜色。

OutlineButton(
onPressed: () {},
child: Text(‘Outline Button’),
);
IconButton
IconButton 是一个图标按钮，它通常会出现在应用程序的工具栏、导航栏或 appbar 上。

IconButton(
icon: Icon(Icons.favorite),
onPressed: () {},
);
FloatingActionButton
FloatingActionButton 是一个悬浮按钮，它通常出现在应用程序的底部右侧，并且将最常用的操作集成到一个便捷的位置。

FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
);
以上是 Flutter 中常用的几种 Button 类型，它们各有特点，在不同场景下使用会有不错的效果。

例子

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget { // 应用程序的根组件
  @override
  Widget build(BuildContext context) { // 使用build方法返回应用程序的主体部分
    return MaterialApp( // MaterialApp是基于Material Design设计体系的标签，作为整个应用的主要Wdiget，提供给顶级Navigator、Theme、标题等所有子组件使用。
      home: Scaffold( // 脚手架是一个方便实现常见应用程序布局模式的组件。包含AppBar、底部NavigationBar、FloatingActionButton和Drawer等常见布局组件，并管理这些子组件的位置。
        body: Container( // 容器是可以大小可定位的可视化元素。它可以包含很多小的Wdiget，并具有自己的样式、绘制优化以及布局特性。
          margin: EdgeInsets.symmetric(horizontal: 16.0), // 给容器增加水平方向外边距，指定值为16
          child: Column( // Column（垂直布局）将孩子们按从上到下的顺序放在一起。默认情况下，子项在竖直方向上扩展以填满矩形。
            mainAxisAlignment: MainAxisAlignment.center, // 设置孩子们在主轴方向上（即垂直方向）居中
            children: <Widget>[ // 包括孩子们的列表
              Text( // 带格式的文本内容
                "Title", // 文本内容
                textAlign: TextAlign.center, // 文字居中对齐
                style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.bold), // 设置文本样式
              ),
              SizedBox(height: 16.0), // 添加了一个尺寸框，用于控制组件之间的距离
              ElevatedButton( // Material风格按钮组件，嵌入了类似浮动按钮的设计
                onPressed: () => print("Pressed"), // 按钮被按下时执行的函数调用
                child: Text("Press me"), // 按钮上显示的文字
              ),
              SizedBox(height: 16.0), // 再次添加尺寸框用于控制组件之间的距离
              Row( // 水平布局组件
                mainAxisAlignment: MainAxisAlignment.spaceBetween, // 布置方式：让子部件在水平方向上相等地分开，并且每个部件位于行的两侧。
                children: <Widget>[ // 组件列表
                  ElevatedButton( // 第一个按钮
                    onPressed: () => print("Left pressed"), // 按钮被按下时执行的函数调用
                    child: Text("Left button"), // 按钮上显示的文字
                  ),
                  SizedBox(width: 16.0), // 制作一个固定宽度的空间以控制两个按钮之间的距离。
                  ElevatedButton( // 第二个按钮
                    onPressed: () => print("Right pressed"), // 按钮被按下时执行的函数调用
                    child: Text("Right button"), // 按钮上显示的文字
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}}
}

微信小程序 Button

<view class="container">
  <text class="title">Title</text>
  <button class="primary-button" bindtap="onPressButton">Press me</button>
  <view class="button-group">
    <button class="secondary-button" bindtap="onPressLeftButton">Left button</button>
    <button class="secondary-button" bindtap="onPressRightButton">Right button</button>
  </view>
</view>

/* index.wxss */

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 16px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.primary-button {
  width: 100%;
  background-color: #007AFF;
  color: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.secondary-button {
  background-color: white;
  color: #007AFF;
  border: 1px solid #007AFF;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

// index.js
Page({
  onPressButton: function () {
    console.log('Button pressed')
  },
  onPressLeftButton: function () {
    wx.showToast({
      title: 'Left button pressed',
      icon: 'none'
    })
  },
  onPressRightButton: function () {
    wx.showToast({
      title: 'Right button pressed',
      icon: 'none'
    })
  }
})

React Native Image

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

// 创建样式表
const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

// 创建组件
const DisplayAnImage = () => {
  return (
    // 渲染视图容器
    <View style={styles.container}>
      {/* 显示静态图片 */}
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      {/* 使用 URL 显示远程图片 */}
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      {/* 使用 Base64 编码的图片数据显示图片 */}
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
}

// 导出组件
export default DisplayAnImage;

Flutter Image

import 'package:flutter/material.dart';

class DisplayAnImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 显示静态图片
            Image.asset(
              'images/flutter-logo.png',
              width: 50,
              height: 50,
            ),
            // 使用 URL 显示远程图片
            Image.network(
              'https://flutter.dev/assets/ui/layout/container-appearance.animation.00.gif',
              width: 50,
              height: 50,
            ),
            // 使用 Base64 编码的图片数据显示图片
            Image.memory(
              _decodeBase64Image(),
              width: 66,
              height: 58,
            ),
          ],
        ),
      ),
    );
  }

  // 解码 Base64 编码的图片数据并返回字节数组
  List<int> _decodeBase64Image() {
    final String base64 =
        'iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==';
    return base64Decode(base64);
  }
}

微信小程序 Image

以下是使用微信小程序实现显示图片的代码：

<!-- display-an-image.wxml -->
<view class="container">
  <!-- 显示静态图片，需要在项目根目录下创建 images 文件夹，并将 react-native-logo.png 图片文件放置于其中 -->
  <image class="tinyLogo" src="/images/react-native-logo.png" />
  <!-- 使用 URL 显示远程图片 -->
  <image class="tinyLogo" src="https://reactnative.dev/img/tiny_logo.png" />
  <!-- 使用 Base64 编码的图片数据显示图片 -->
  <image class="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==" />
</view>

/* display-an-image.wxss */
.container {
  padding-top: 50rpx;
}
.tinyLogo {
  width: 50rpx;
  height: 50rpx;
}
.logo {
  width: 66rpx;
  height: 58rpx;
}

React Native输入框

import React from 'react';
import { View, TextInput } from 'react-native';

function UselessTextInput(props) {
  return (
    <TextInput
      {...props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
      editable
      maxLength={40}
    />
  );
}

export default function UselessTextInputMultiline() {
  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');

  // 你可以试着输入一种颜色，比如red，那么这个red就会作用到View的背景色样式上
  return (
    <View
      style={{
        backgroundColor: value,
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <UselessTextInput
        multiline
        numberOfLines={4}
        onChangeText={text => onChangeText(text)}
        value={value}
      />
    </View>
  );
}

Flutter 输入框

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  void _printInputText() {
    print('The input text is: ${_controller.text}');
  }

  @override
  void dispose() {
    // 需要手动释放 TextEditingController 实例
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter TextField Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: 'Please enter some text',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _printInputText,
              child: Text('Get Input Text'),
            ),
          ],
        ),
      ),
    );
  }
}
上述代码中，我们首先创建了一个名为 MyHomePage 的有状态组件。在该组件内部，我们创建了一个 TextEditingController 实例 _controller 来控制输入框的内容，并在组件销毁时手动释放资源（调用 dispose() 方法）。

然后，在组件的 UI 部分，我们使用了 TextField 组件并将 _controller 传入该组件的 controller 属性中。同时，我们也为输入框添加了一些提示文本，以便用户了解该输入框的用途。

最后，在输入框下方还创建了一个 ElevatedButton 组件，通过点击该按钮来获取输入框中的文本内容。我们这里通过将 _controller.text 的值打印到控制台来演示。

如果您运行上述代码，就会得到一个包含一个输入框和一个按钮的居中显示布局。

在输入框内输入任意文本后，点击按钮可以看到该文本被打印到了控制台上。

微信小程序 输入框

<view class="container" style="background-color: {{value}}; border-bottom-color: #000; border-bottom-width: 1px;">
  <textarea class="input-box" placeholder="Useless Multiline Placeholder" maxlength="40" bindinput="onInput" value="{{value}}" auto-height></textarea>
</view>

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300rpx;
}

.input-box {
  width: 80%;
  height: 150rpx;
  font-size: 32rpx;
  padding: 20rpx;
  border: none;
}

Page({
  data: {
    value: '#ffffff',
  },
  onInput(event) {
    const { value } = event.detail;
    this.setData({
      value,
    });
  },
});

React Native 表单

React Native 中没有内置的表单组件。不过，您可以使用一些库来创建和管理 React Native 表单，例如 formik 和 react-hook-form 等。这些库可以帮助您更方便地进行表单数据处理、校验、提交等操作，并提供了许多有用的工具函数和 API。

下面以 formik 为例，给出一个简单的示例代码：

import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { useFormik } from 'formik';

export default function FormExample() {
  const formik = useFormik({
    initialValues: { name: '', email: '', password: '' },
    validate: (values) => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Required';
      }
      if (!values.email) {
        errors.email = 'Required';
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
      }
      if (!values.password) {
        errors.password = 'Required';
      }
      return errors;
    },
    onSubmit: (values) => console.log(values),
  });

  return (
    <View>
      <TextInput
        placeholder="Your Name"
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={formik.handleChange('name')}
        onBlur={formik.handleBlur('name')}
        value={formik.values.name}
      />
      {formik.touched.name && formik.errors.name ? (
        <Text style={{ color: 'red' }}>{formik.errors.name}</Text>
      ) : null}
      <TextInput
        placeholder="Email Address"
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={formik.handleChange('email')}
        onBlur={formik.handleBlur('email')}
        value={formik.values.email}
      />
      {formik.touched.email && formik.errors.email ? (
        <Text style={{ color: 'red' }}>{formik.errors.email}</Text>
      ) : null}
      <TextInput
        secureTextEntry
        placeholder="Password"
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={formik.handleChange('password')}
        onBlur={formik.handleBlur('password')}
        value={formik.values.password}
      />
      {formik.touched.password && formik.errors.password ? (
        <Text style={{ color: 'red' }}>{formik.errors.password}</Text>
      ) : null}
      <Button title="Submit" onPress={formik.handleSubmit} />
    </View>
  );
}

在这个例子中，我们使用 useFormik() hook 创建一个表单实例。initialValues 属性指定了表单的初始值，validate 函数对表单进行校验，onSubmit 函数则定义了当表单提交时应该执行的操作。

我们使用 TextInput 组件创建了三个输入框，并通过 formik.handleChange 方法将其与表单数据绑定起来。每个输入框还监听了 onBlur 事件，在用户输入内容后离开输入框时会立即更新表单状态，从而在下方显示出任何验证错误消息（通过触发 formik.handleBlur 方法实现）。

最后，我们在按钮组件上调用 formik.handleSubmit 方法，触发表单提交操作。

Flutter 表单

import 'package:flutter/material.dart';

// 创建带表单验证的 StatefulWidget 组件
class FormExample extends StatefulWidget {
  @override
  _FormExampleState createState() => _FormExampleState();
}

// 定义 State 类
class _FormExampleState extends State<FormExample> {
  // 全局变量，用于获取表单对象并进行校验和提交
  final _formKey = GlobalKey<FormState>();

  // 定义三个状态变量，对应表单输入值
  String _name;
  String _email;
  String _password;

  // 表单提交函数，当表单校验通过时触发
  void _submitForm() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save(); // 将所有输入框内的数据保存到相应的状态变量中
      print('Name: $_name');
      print('Email: $_email');
      print('Password: $_password');
      // 在这里调用 API 将表单数据提交到服务器处理
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey, // 将 key 属性绑定到我们在构造函数中创建的 GlobalKey 对象
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // 姓名输入框
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Your Name',
                  border: OutlineInputBorder(),
                ),
                validator: (value) =>
                    value.isEmpty ? 'Please enter your name.' : null,
                onSaved: (value) => _name = value.trim(),
              ),
              SizedBox(height: 16.0), // 加上一些距离，使视觉效果更佳

              // 邮箱输入框
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Email Address',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter your email address.';
                  } else if (!RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$').hasMatch(value)) {
                    return 'Invalid email address.';
                  }
                  return null;
                },
                onSaved: (value) => _email = value.trim(),
              ),
              SizedBox(height: 16.0),

              // 密码输入框
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                ),
                obscureText: true, // 密码不可见
                validator: (value) =>
                    value.isEmpty ? 'Please enter your password.' : null,
                onSaved: (value) => _password = value.trim(),
              ),
              SizedBox(height: 16.0),

              // 提交按钮
              ElevatedButton(
                child: Text('Submit'),
                onPressed: _submitForm,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

微信小程序表单

使用微信小程序的form组件来创建表单，并使用相关的校验方法进行验证。以下是一个简单的例子：

在wxml文件中定义表单代码如下：

<form bindsubmit="handleSubmit">
  <input name="name" placeholder="请输入姓名"/>
  <input name="age" type="number" placeholder="请输入年龄"/>
  <input name="phone" maxlength="11" placeholder="请输入手机号"/>
  <button formType="submit">提交</button>
</form>

在js文件中，声明 handleSubmit 方法来处理表单提交事件，并在该方法内进行表单数据的校验。代码如下：

Page({
  data: {},
  handleSubmit: function(e) {
    const { detail: { value } } = e;
    
    // 对表单字段进行校验
    if (!value.name || !value.age || !value.phone) {
      wx.showToast({
        title: '请填写完整的信息',
        icon: 'none'
      });
      return;
    }
    if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value.phone)) {
      wx.showToast({
        title: '手机号格式不正确',
        icon: 'none'
      });
      return;
    }

    // 校验通过，执行后续操作
    console.log('提交数据：', value);
  }
})

以上代码的含义是：首先在 handleSubmit 方法中获取表单数据，并按照所需格式进行校验。如果校验不通过，则通过 wx.showToast 方法提示用户出错信息；否则，可以拿到表单数据并进行后续操作，例如将数据发送至服务器等。