Question

我正在尝试根据设计设置TextField的样式，但是当我尝试设置填充颜色和边框颜色时，它们并没有改变：

child: Container(
                    height: 30,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                      child: TextField(
                        onChanged: runSearch,
                        textAlign: TextAlign.start,
                        decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(horizontal: 0),
                            prefixIcon: Icon(Icons.search, color: Color(GoEngColors.mainColorActive)),
                            border: OutlineInputBorder(
                              borderSide: new BorderSide(color: Colors.transparent),
                              borderRadius: const BorderRadius.all(
                                const Radius.circular(30.0),
                              ),
                            ),
                            filled: true,
                            focusedBorder: null,
                            hintStyle: TextStyle(fontSize: 14, color: Color(GoEngColors.primaryTextColor)),
                            hintText: "Поиск",
                            fillColor: Color(GoEngColors.munsell)),
                      ),
                    ),
                  ),

实际结果

预期结果

static int munsell = 0xFF0F0F0;

如何将此颜色设置为背景并删除边框？

更新

借助建议的解决方案，我可以在正常状态下获得成功

但这是处于选定（集中）状态的结果：

如何删除下划线并将提示和文本保持在同一级别？

Answer 1

您的颜色代码似乎有误。您忘记再添加一个F

int munsell = 0xFFF0F0F0;

您还必须为InputDecoration

设置启用的边框样式

enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.transparent, width: 0.0),
                  borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
                )

Answer 2

我个人不再使用TextField小部件，而使用CupertinoTextField小部件。这是因为更改其属性更为直接。我忘记了如何在TextField中执行此操作，但是在Cupertino中，您只需像使用BoxDecoration的容器那样进行这些声明即可。您可以尝试一下。

Answer 3

尝试使用以下示例

new Container(
            padding: const EdgeInsets.all(8.0),
            alignment: Alignment.center,
            height: 60.0,
            decoration: new BoxDecoration(
              color: Colors.blueGrey,
              border: new Border.all(
                color: Colors.black54,
                width: 4.0
              ),
              borderRadius: new BorderRadius.circular(12.0)
            ),
            child: new TextFormField(
              decoration: null,
            ),
          )

您可以删除边框，它会满足您的要求。

Answer 4

使用这个：

onClick={()=>selceted.bind(element.name)}

Flutter TextField填充和边框颜色不会更改为灰色

4 个答案: