Flutter输入字段插件sm_input_field的使用

当然，以下是如何在Flutter项目中使用sm_input_field插件的一个简单示例。sm_input_field是一个用于创建自定义输入字段的Flutter插件，它提供了丰富的功能和样式定制选项。

首先，确保你已经在pubspec.yaml文件中添加了sm_input_field依赖：

dependencies:
  flutter:
    sdk: flutter
  sm_input_field: ^最新版本号 # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中导入sm_input_field并使用它。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:sm_input_field/sm_input_field.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  String _password = '';

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      print('Username: $_username');
      print('Password: $_password');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SM Input Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SMInputField(
                labelText: 'Username',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your username';
                  }
                  return null;
                },
                onSaved: (value) {
                  _username = value!;
                },
                prefixIcon: Icon(Icons.account_circle),
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _username = '';
                    // You may need to call setState here if the field is part of a StatefulWidget
                    // setState(() {});
                  },
                ),
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 16),
              SMInputField(
                labelText: 'Password',
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
                prefixIcon: Icon(Icons.lock),
                suffixIcon: IconButton(
                  icon: Icon(
                    _password.isEmpty ? Icons.visibility_off : Icons.visibility,
                  ),
                  onPressed: () {
                    setState(() {
                      // Toggle password visibility
                      obscureText = !obscureText;
                    });
                  },
                ),
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: _submit,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意：

1. 在suffixIcon的IconButton的onPressed回调中，对于密码字段的可见性切换，上面的代码示例直接使用了obscureText变量，但由于SMInputField并没有直接暴露obscureText属性供外部控制，你需要通过其他方式（例如状态管理）来实现这一功能。这里只是为了演示目的而写出。

2. SMInputField的API可能会有所不同，具体请参考最新的插件文档以获取准确的信息和示例。

3. 由于SMInputField可能不支持直接通过外部变量控制密码可见性，你可能需要封装一个自定义的StatefulWidget来处理这一逻辑。

希望这个示例能帮助你开始在Flutter项目中使用sm_input_field插件！