首页 > 解决方案 > 如何在 Flutter 中的 TextFormField 中的图标和文本之间添加分隔线

问题描述

我在颤振中使用 TextFormField 。我可以在 prefixIcon 和 text 之间放置一个分隔符吗?是否有一个看起来像分隔线的图标(在任何包中)??这是我的代码 -

Container(
                color: Colors.black45,
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.only(left: 5.0, right: 50.0, bottom: 5.0),
                child: TextFormField(
                  textAlignVertical: TextAlignVertical.bottom,
                  style: TextStyle(
                    color: Colors.white
                  ),
                  cursorColor: Color(0xFF075E54),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(bottom: 13.0),
                    prefixIcon: Icon(
                      Icons.add_photo_alternate,
                      color: Colors.white,
                      size: MediaQuery.of(context).size.width*0.07,
                    ),
                    border: InputBorder.none,
                    hintText: 'Add a caption...',
                    hintStyle: TextStyle(
                      color: Colors.grey[400],
                      fontSize: MediaQuery.of(context).size.width*0.042,
                    )
                  ),
                ),
              ),

标签: androidiosflutterdart

解决方案


将所需的分隔器小部件传递给prefix输入装饰选项,或者我相信您可以prefixIcon使用Containerboxdecoration 和一个右边框作为分隔器进行包装


推荐阅读