TextField设置背景和清空内容的方式

Container(
        width: 300,
        padding: const EdgeInsets.all(20.0),
        child: Column(children: [
          TextField(
            decoration: InputDecoration(
              filled: true, // 启用背景填充
              fillColor: Colors.grey[200], // 背景颜色
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10), // 圆角
                borderSide: BorderSide.none, // 隐藏默认边框
              ),
              hintText: '请输入内容',
            ),
          ),
          SizedBox(height: 10,),
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
                borderSide: BorderSide(color: Colors.blue, width: 2),
              ),
              enabledBorder: OutlineInputBorder( // 非聚焦状态边框
                borderRadius: BorderRadius.circular(15),
                borderSide: BorderSide(color: Colors.grey),
              ),
              focusedBorder: OutlineInputBorder( // 聚焦状态边框
                borderRadius: BorderRadius.circular(15),
                borderSide: BorderSide(color: Colors.blue, width: 2),
              ),
            ),
          ),
          SizedBox(height: 10,),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.3),
                  blurRadius: 5,
                  offset: Offset(0, 2),
                ),
              ],
            ),
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none, // 隐藏TextField自带边框
                contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                hintText: '搜索...',
              ),
            ),
          ),
          SizedBox(height: 10,),
          TextField(
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.grey[100],
              border: UnderlineInputBorder( // 仅底部有边框
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                ),
                borderSide: BorderSide.none,
              ),
            ),
          ),
          SizedBox(height: 10,),
          TextField(
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search,color: Colors.black.withOpacity(0.5),), // 前置图标
              filled: true,
              fillColor: Colors.grey[100],
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30), // 圆形输入框
                borderSide: BorderSide.none,
              ),
            ),
          ),
          SizedBox(height: 10,),
          ValueListenableBuilder<TextEditingValue>(
            valueListenable: _controller,
            builder: (context, value, _) {
              return TextField(
                controller: _controller,
                decoration: InputDecoration(
                  suffixIcon: value.text.isEmpty
                      ? null
                      : IconButton(
                    icon: Icon(Icons.clear),
                    onPressed: () => _controller.clear(),
                  ),
                ),
              );
            },
          )
        ],),
      )

效果图