flutter - 带文本字段的卡片
问题描述
如何在 Textformfeild 中设计卡片视图这是我的示例代码,其中包含带有国家选择器的卡片视图和文本表单字段,它不起作用
Card(
elevation: 5.0,
child: Container(
height: 65,
width: 300,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 8.0),
child: CountryPicker(
dense: false,
showFlag:
false, //displays flag, true by default
showDialingCode:
false, //displays dialing code, false by default
showName:
true, //displays country name, true by default
showCurrency:
false, //eg. 'British pound'
showCurrencyISO: true, //eg. 'GBP'
onChanged: (Country country) {
setState(() {
_selected = country;
});
},
selectedCountry: _selected,
),
),
Container(
margin: EdgeInsets.only(top: 5.0),
height: 50,
width: 1,
color: Colors.grey,
),
TextFormField(
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
counterText: "",
labelText: "Mobile Number",
labelStyle: TextStyle(
color: Colors.grey,
fontFamily: 'Poppins',
fontWeight: FontWeight.w400,
),
),
),
],
),
],
)
],
),
),
),
解决方案
我认为您已经添加了一个额外的行和列小部件。此外,您必须将 TextFormField 包装在 Expanded 小部件内,以便为其提供尽可能多的空间。
你可以试试下面的代码,
Country _selected;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Card(
elevation: 5.0,
child: Container(
height: 65,
width: 300,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: CountryPicker(
dense: false,
showFlag: false,
//displays flag, true by default
showDialingCode: false,
//displays dialing code, false by default
showName: true,
//displays country name, true by default
showCurrency: false,
//eg. 'British pound'
showCurrencyISO: true,
//eg. 'GBP'
onChanged: (Country country) {
setState(() {
_selected = country;
});
},
selectedCountry: _selected,
),
),
Container(
margin: EdgeInsets.only(top: 5.0),
height: 50,
width: 1,
color: Colors.grey,
),
Expanded(
child: TextFormField(
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
counterText: "",
labelText: "Mobile Number",
labelStyle: TextStyle(
color: Colors.grey,
fontFamily: 'Poppins',
fontWeight: FontWeight.w400,
),
),
),
),
],
),
),
),
),
);
}
我认为它肯定会奏效。
推荐阅读
- ember.js - 从子路由中的组件触发对父路由的操作
- algorithm - 澄清答案......在一个集合中找到最大可能的两个相等和
- php - 如何使用 laravel 5 跳过某些路线上的视图缓存?
- sql - 在一个 SQL 中将行转换为列,但不影响行数
- django - 如何在 django 中保留两个身份验证系统
- amazon-web-services - Amazon SES - 是否有内置选择退出/取消订阅选项可用
- r - R中的randomForest:可以拟合模型并将其用于没有错误的预测,但tuneRF会给出差异长度误差
- xml - 如何更改 fo:* 元素中的属性
- javascript - javascript - 如何在列中绘制框
- ios - 矩阵聊天冻结