Flutter

小白学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, // 下划线的颜色
                  ),
                ],
              ),
上一篇下一篇

猜你喜欢

热点阅读