小白学Flutter - 登录的输入框
2023-11-16 本文已影响0人
林希品
效果图
注意
如果将TextField放在Row中,而不添加Expanded,TextField可能不显示或显示不完整的原因可能是由于Row默认不会拉伸其子部件以填充可用空间。TextField具有默认大小,如果没有足够的空间来容纳它,它可能会被裁剪或不显示。
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded( //必须用这个写
flex: 2,
child:
Text('验证码',textAlign: TextAlign.center,),), // 左边的文本
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
hintText: '请输入验证码', // 提示文本
border: InputBorder.none, // 移除输入框的边框
),
),
),
Expanded(
flex: 2,
child: TextButton(onPressed: () {
// 在这里处理按钮点击事件
print('Button clicked with text: button');
}, child: Text('获取验证码')),
),
],
),
Container(
height: 1, // 下划线的高度
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
color: MColors.colorStarNoClick, // 下划线的颜色
),
],
),