如何在 Flutter 中的 TextFormField 中的图标和文本之间添加分隔线

Question

我在 Flutter 中使用 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,
                    )
                  ),
                ),
              ),

Answer 1

将所需的分隔线小部件传递给输入装饰的prefix 选项，或者我相信您可以将prefixIcon 与Container 与boxdecoration 和一个右边框作为分隔线一起包装

Answer 2

您可以将您的图标包装在 Container 中并为其添加边框，这是一个示例代码：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black45,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left: 5.0, right: 50.0),
      child: TextFormField(
        textAlignVertical: TextAlignVertical.bottom,
        style: TextStyle(color: Colors.white),
        cursorColor: Color(0xFF075E54),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.only(bottom: 13.0),
          prefixIcon: Container(
            margin: EdgeInsets.only(right: 8),
            decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.white)),
            ),
            child: 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,
          ),
        ),
      ),
    );
  }
}

Try the full code on DartPad

截图