flutter - Flutter 自定义下拉菜单 + TextFormField
问题描述
如何实现Row
由 adropdown
和 a组成的以下外观TextFormField
?
我可以TextFormField
使用以下代码自定义:
final phoneNumberBox = DecoratedBox(
decoration: const BoxDecoration(color: Color(0x2B8E8E93),
borderRadius:BorderRadius.only(
topRight: const Radius.circular(32),
bottomRight: const Radius.circular(32))),
child: phoneNumber,
);
final phoneNumber =
TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
controller: _phoneNumberController,
// validator: Validator.validateField,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: new BorderRadius.only(
topRight: const Radius.circular(32),
bottomRight: const Radius.circular(32))),
),
);
但是我不知道如何改变DropDown
解决方案
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(body: Content()),
);
}
}
class Content extends StatefulWidget {
@override
_ContentState createState() => _ContentState();
}
class _ContentState extends State<Content> {
final List<String> _items = ['+1', '+42', '+666', '+17', '+228'];
TextEditingController _phoneNumberController = TextEditingController();
String _value;
@override
void initState() {
super.initState();
_value = _items.first;
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 32),
height: 56,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28),
color: Colors.grey[200],
),
child: Row(
children: <Widget>[
DropdownButtonHideUnderline(
child: Container(
padding: const EdgeInsets.fromLTRB(32, 8, 16, 8),
child: DropdownButton<String>(
value: _value,
items: _items.map((value) {
return DropdownMenuItem<String>(child: Text(value), value: value);
}).toList(),
onChanged: _onDropDownChanged,
),
),
),
Container(width: 1, color: Colors.grey[300]),
Expanded(
child: TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
controller: _phoneNumberController,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(16, 16, 8, 16),
border: InputBorder.none,
suffixIcon: Padding(
child: Icon(Icons.cancel, color: Colors.grey[400]),
padding: const EdgeInsets.only(right: 16),
),
),
),
),
],
),
),
);
}
void _onDropDownChanged(String value) {
setState(() {
_value = value;
});
}
}
推荐阅读
- html - React 中的组件重叠
- javascript - 通过过滤器对象中的键过滤对象数组
- python - Pandas - lambda - 列表中的值和来自另一列的对应值,其中列表中的值
- c# - System.Text.Json.Deserialize 仍然无法处理 .NET Core 5 中的 TimeSpan?
- java - 如何获取应用了补丁的 openjdk-8-jdk 的源代码?
- node.js - 使用 $and 查询运算符与 mongoose find() 进行挑战
- docker - Lua os.excute() 函数不能正常工作
- python - 如何显示系列中的所有数据框列?
- java - 如何避免使用 JPA 在实体关系中违反外键约束
- php - 如何使用 php 将数组传递给 dompdf?