聚焦边界不带整个容器 Flutter

4si2a6ki 于 2023-03-31 发布在 Flutter

关注(0)|答案(3)|浏览(127)

如图所示，聚焦边框没有占据整个空间。谁能解释一下原因并解决它？

下面是TextField的代码：

child: Padding(
                    padding: const EdgeInsets.only(left: 20.0),
                    child: TextField(
                      controller: _emailController,
                      decoration: InputDecoration(
                        hintText: 'Enter your email',
                        border: InputBorder.none,
                        focusedBorder: OutlineInputBorder(
                          borderSide:
                              const BorderSide(color: Colors.deepPurple),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        fillColor: Colors.grey[200],
                        filled: true,
                      ),
                    ),
                  ),
                ),
              ),

我试过添加counterstyle，但没有用！！

flutter

来源：https://stackoverflow.com/questions/75840212/focused-border-not-taking-the-whole-container-flutter

3条答案

按热度按时间

axzmvihb1#

看代码共享的图像...你向左填充是将带边框的文本字段推到左边，这导致了向左20的空间...
删除填充小部件，它应该允许文本字段有完整的边框，并给予填充内的文本字段使用

TextField(
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    hintText: 'Enter Something',
    contentPadding: EdgeInsets.all(20.0),
  ),
)

这将在文本字段内的文本周围给予填充。
如果你想只给予左边填充，就像你现在在TextField中一样，你可以使用下面的代码...

TextField(
      textAlign: TextAlign.left,
      decoration: InputDecoration(
        hintText: 'Enter Something',
        contentPadding: EdgeInsets.only(left:20.0),
      ),
    )

赞(0）回复(0）举报 2023-03-31

7fyelxc52#

您可以删除“填充”小部件或将TextField的左侧填充设置为0，

child: TextField(
  controller: _emailController,
  decoration: InputDecoration(
    hintText: 'Enter your email',
    border: InputBorder.none,
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.deepPurple),
      borderRadius: BorderRadius.circular(12),
    ),
    fillColor: Colors.grey[200],
    filled: true,
    contentPadding: EdgeInsets.only(left: 20.0), // or remove this line
  ),
),

赞(0）回复(0）举报 2023-03-31

oknwwptz3#

**错误原因：**Padding您为TextFormField提供了左填充，导致TextFormField只有左边有填充，其他边都占据了整个容器。**解决方法：**删除TextFormField的填充

赞(0）回复(0）举报 2023-03-31