Flutter输入组件插件d_input的使用
Flutter输入组件插件d_input的使用
D'Input 是一个用于构建更快输入界面的包，并提供了默认边框样式。
特性
- 简洁的输入框
- 输入标签
- 输入标题
- 输入验证器
- 输入区域
- 密码输入框
- 一些样式
- 混合输入框（推荐）
截图
使用方法
基本输入框
DInput(controller: TextEditingController()),
示例代码
以下是一个完整的示例代码，展示了如何在Flutter应用中使用D'Input插件：
import 'package:d_input/d_input.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: TestDInput(),
);
}
}
class TestDInput extends StatefulWidget {
const TestDInput({super.key});
[@override](/user/override)
State<TestDInput> createState() => _TestDInputState();
}
class _TestDInputState extends State<TestDInput> {
final controller1 = TextEditingController();
final controller2 = TextEditingController();
final controller3 = TextEditingController();
final controller4 = TextEditingController();
final controller5 = TextEditingController();
final controller6 = TextEditingController();
final controller7 = TextEditingController();
final controller8 = TextEditingController();
final controller9 = TextEditingController();
final controller10 = TextEditingController();
final controller11 = TextEditingController();
bool obscure = false;
List<String> levels = [
'初学者',
'初级',
'中级',
'高级',
'专家',
];
String dropdownValue1 = '初学者';
String dropdownValue2 = '初学者';
String dropdownValue3 = '初学者';
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('D Input'),
centerTitle: true,
),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
DInput(
controller: TextEditingController(),
),
const SizedBox(height: 20),
DInputPassword(
controller: TextEditingController(),
),
const SizedBox(height: 20),
DInputMix(
controller: controller1,
hint: '混合输入框1',
noBoxBorder: true,
inputOnFieldSubmitted: (value) {
print('提交: $value');
},
),
const SizedBox(height: 20),
DInputMix(
controller: controller2,
title: '描述',
hint: '混合输入框2',
minLine: 3,
maxLine: 5,
),
const SizedBox(height: 20),
DInputMix(
controller: controller3,
hint: '混合输入框3',
boxColor: Theme.of(context).primaryColor.withOpacity(0.4),
hintStyle: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 14,
color: Colors.white,
),
inputStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: Colors.white,
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller4,
hint: '混合输入框4',
boxRadius: 8,
boxBorder: Border.all(
width: 2,
color: Colors.green,
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller5,
hint: '混合输入框5',
prefixIcon: IconSpec(
icon: Icons.email,
onTap: () => print('Icons.email'),
),
suffixIcon: IconSpec(
icon: Icons.verified,
onTap: () => print('Icons.verified'),
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller6,
hint: '混合输入框6',
inputPadding: const EdgeInsets.symmetric(vertical: 16),
prefixIcon: const IconSpec(
icon: Icons.email,
color: Colors.green,
),
suffixIcon: const IconSpec(
icon: Icons.verified,
color: Colors.blue,
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller7,
hint: '混合输入框7',
inputPadding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 12,
),
inputMargin: const EdgeInsets.symmetric(vertical: 8),
inputBackgroundColor: Colors.amber.withOpacity(0.3),
inputRadius: 10,
prefixIcon: const IconSpec(
icon: Icons.email,
color: Colors.green,
),
suffixIcon: const IconSpec(
icon: Icons.verified,
color: Colors.blue,
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller8,
hint: '混合输入框8',
inputPadding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 12,
),
inputBackgroundColor: Colors.amber.withOpacity(0.3),
inputRadius: 12,
prefixIcon: const IconSpec(
icon: Icons.email,
color: Colors.green,
alignment: Alignment(0.3, 0),
boxSize: Size(40, 56),
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller9,
hint: '混合输入框9',
minLine: 3,
maxLine: 3,
crossAxisAlignmentBox: CrossAxisAlignment.start,
inputPadding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 12,
),
inputMargin: const EdgeInsets.symmetric(vertical: 8),
inputBackgroundColor: Colors.grey.withOpacity(0.2),
inputRadius: 12,
prefixIcon: const IconSpec(
icon: Icons.image,
color: Colors.green,
),
suffixIcon: const IconSpec(
icon: Icons.send,
color: Colors.blue,
),
),
const SizedBox(height: 20),
DInputMix(
controller: controller10,
hint: '混合输入框10..\n行2..\n行3..',
crossAxisAlignmentBox: CrossAxisAlignment.start,
boxBorder: Border.all(color: Colors.transparent),
boxColor: Theme.of(context).primaryColor.withOpacity(0.3),
boxRadius: 10,
minLine: 3,
maxLine: 3,
inputPadding: const EdgeInsets.symmetric(vertical: 16),
prefixIcon: const IconSpec(icon: Icons.description),
),
const SizedBox(height: 20),
DInputMix(
controller: controller11,
title: '选择日期',
hint: '混合输入框11',
crossAxisAlignmentTitle: CrossAxisAlignment.end,
inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
boxRadius: 20,
suffixIcon: IconSpec(
icon: Icons.event,
splashColor: Colors.green.shade300,
margin: const EdgeInsets.all(2),
radius: 20 - 2,
onTap: () {
// 日期选择器并设置到控制器
},
),
),
const SizedBox(height: 20),
DInputMix(
title: '左侧子组件',
hint: '混合输入框12',
inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
boxRadius: 20,
prefixIcon: IconSpec(
icon: Icons.event,
onTap: () {},
),
leftChildren: const [
Icon(Icons.reset_tv),
Icon(Icons.ac_unit),
],
),
const SizedBox(height: 20),
DInputMix(
title: '右侧子组件',
hint: '混合输入框13',
inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
boxRadius: 20,
rightChildren: const [
Icon(Icons.reset_tv),
Icon(Icons.ac_unit),
],
suffixIcon: IconSpec(
icon: Icons.event,
onTap: () {},
),
),
const SizedBox(height: 20),
DInputMix(
title: '两侧子组件',
hint: '混合输入框14',
inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
boxRadius: 20,
prefixIcon: IconSpec(
icon: Icons.arrow_back,
onTap: () {},
),
leftChildren: const [
Icon(Icons.reset_tv),
Icon(Icons.ac_unit),
],
rightChildren: const [
Icon(Icons.reset_tv),
Icon(Icons.ac_unit),
],
suffixIcon: IconSpec(
icon: Icons.arrow_forward,
onTap: () {},
),
),
const SizedBox(height: 20),
DInputDropdown<String>(
value: dropdownValue1,
inputOnChanged: (value) {},
items: levels.map((e) {
return DropdownMenuItem(
value: e,
child: Text(e),
);
}).toList(),
title: '下拉框1',
),
const SizedBox(height: 20),
DInputDropdown<String>(
value: dropdownValue2,
inputOnChanged: (value) {},
items: levels.map((e) {
return DropdownMenuItem(
value: e,
child: Text(e),
);
}).toList(),
title: '下拉框2',
icon: const Icon(Icons.keyboard_arrow_down),
),
const SizedBox(height: 20),
DInputDropdown<String>(
value: dropdownValue3,
inputOnChanged: (value) {
if (value == null) return;
dropdownValue3 = value;
},
items: levels.map((e) {
return DropdownMenuItem(
value: e,
child: Text(e),
);
}).toList(),
title: '下拉框3',
inputRadius: 12,
inputMargin: const EdgeInsets.only(left: 8),
inputPadding: const EdgeInsets.fromLTRB(16, 8, 8, 8),
inputBackgroundColor: Colors.amber.withOpacity(0.3),
icon: const Icon(Icons.keyboard_arrow_down),
suffixIcon: IconSpec(
icon: Icons.add_circle,
onTap: () => print(dropdownValue3),
),
),
const SizedBox(height: 20),
],
),
);
}
}
更多关于Flutter输入组件插件d_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter输入组件插件d_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter中使用d_input插件的示例代码。d_input是一个假定的输入组件插件，实际中可能并不存在，但我会按照一般的Flutter插件使用方法来给出一个示例。
首先，确保你已经在pubspec.yaml文件中添加了d_input依赖：
dependencies:
flutter:
sdk: flutter
d_input: ^最新版本号 # 替换为实际可用的版本号
然后运行flutter pub get来获取依赖。
接下来，你可以在你的Flutter应用中使用d_input。以下是一个简单的示例，展示如何在UI中使用这个插件：
import 'package:flutter/material.dart';
import 'package:d_input/d_input.dart'; // 假设d_input插件提供了这个导入路径
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> {
String _inputText = '';
void _handleInputChanged(String value) {
setState(() {
_inputText = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('d_input 示例'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 使用d_input组件
DInput(
hintText: '请输入内容',
onChanged: _handleInputChanged,
// 其他可能的属性，根据d_input插件的API文档添加
),
SizedBox(height: 16.0),
Text(
'你输入的内容是: $_inputText',
style: TextStyle(fontSize: 18.0),
),
],
),
),
);
}
}
在这个示例中：
- 我们首先导入了
d_input插件。 - 创建了一个简单的Flutter应用，其中包含一个
Scaffold，内部有一个DInput组件和一个显示输入文本的Text组件。 DInput组件接受hintText属性来显示占位符文本，并接受onChanged回调来更新输入文本的状态。- 使用
setState方法来更新UI，以反映用户输入的变化。
请注意，由于d_input是一个假设的插件，实际的插件可能具有不同的属性和方法。因此，你应该参考该插件的官方文档来获取准确的API信息和使用示例。如果d_input实际上存在，并且你有它的文档，那么你应该根据文档中的说明来调整上述代码。
