Question

我希望我的TextField输入与前缀图标在同一行。我尝试了很多方法，包括contentPadding，但没有任何效果。

我希望文本位于购物车图标的中间。 contentPadding只会移动整个内容，而不仅仅是文字

        child: TextField(
          decoration: InputDecoration(
            labelText: 'name of grocery item',
            labelStyle: TextStyle(fontSize: 12),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
            ),
            // contentPadding: EdgeInsets.only(left:10),
            contentPadding: EdgeInsets.only(top: 5, left: 25),
            prefix: Padding(
              padding: const EdgeInsets.only(top: 12.0),
              child: Icon(Icons.local_grocery_store),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
              borderSide: BorderSide(color: Colors.green),
            )
          ),
        ),

Answer 1

您可以在prefixIcon小部件中使用Textfield构造函数来实现此目的

TextField(
          decoration: InputDecoration(
              labelText: 'name of grocery item',
              labelStyle: TextStyle(fontSize: 12),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              // contentPadding: EdgeInsets.only(left:10),
              contentPadding: EdgeInsets.only(top: 0, left: 25),
             
                prefixIcon: Icon(Icons.local_grocery_store),),
             
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
                borderSide: BorderSide(color: Colors.green),
              )),
        ),

Answer 2

删除内容填充顶部-5或放置contentpadding.all（5）

如何使TextField文本与prefixIcon在同一行上？

2 个答案: