android - 列中的行 - 行中的小部件是不可见的
问题描述
我设计了一个注册表单,其中前两个字段是名字和姓氏。这两个字段都将在一行中。字段的自定义小部件如下所示
class LabelFormField extends StatelessWidget {
final String label;
const LabelFormField({this.label});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
label,
style: TextStyle(
color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold),
),
SizedBox(
height: 4.0,
),
TextField(
textAlign: TextAlign.start,
decoration: new InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 4.0, vertical: 0),
hintStyle: TextStyle(fontSize: 18.0),
border: new OutlineInputBorder(
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
filled: true,
fillColor: Colors.grey[200]),
)
],
);
}
}
我将此自定义小部件用作
Column(
children: <Widget>[
Row(
children: <Widget>[
LabelFormField(
label: 'First Name',
),
SizedBox(
width: 16.0,
),
LabelFormField(
label: 'Last Name',
)
],
),
],
),
您可以在该字段所在的位置看到屏幕截图。
解决方案
一个简单的解决方案是用Flexible 或 Expanded包装您的自定义字段,看起来像
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: LabelFormField(
label: 'First Name',
),
),
SizedBox(
width: 16.0,
),
Expanded(
child: LabelFormField(
label: 'Last Name',
),
)
],
),
],
),
通过这样做,您为两个自定义小部件(占据了行的整个宽度)提供了相等的空间,而之前的行不知道您的自定义小部件的大小希望这可以解决您的问题!
推荐阅读
- javascript - 如果在 WooCommerce 中为空或不为空,则为结帐字段设置和取消设置 custom_attributes
- mysql - 如何提高蛋糕 php 中的插入速度?
- azure-active-directory - Azure AD B2C Graph Api - 获取/设置个人资料图片
- php - http_build_query (& => ¶ms) 的意外输出
- javascript - JavaScript - 无法更新嵌套 For 循环内的数组对象属性
- java - JavaFx 标签上的彩色表情符号
- android - 如何自定义移动广告横幅?
- python-3.x - Virtualenv - DeprecationWarning:不推荐使用 imp 模块以支持 importlib
- javascript - Node Express MySQL 和错误:发送后无法设置标头
- java - (Android / Java / SQLite) 为什么我的数据库是空的?