Question

我正在尝试为颤动的TextField添加背景图片。这是我到目前为止所尝试的：

Stack(
 alignment: AlignmentDirectional.center,
 children: <Widget>[
   SizedBox(width:333.0, height:43.0,
     child: Image(image: AssetImage('assets/search_field.png')),),
     TextField(
       textAlign: TextAlign.center,
       controller: _searchController,
       autocorrect: false,
       style: inputTextStyle,
       decoration: InputDecoration(
         filled:false,
     ))],)

不幸的是，我有三个问题：

文本框被拉伸到设备的宽度，光标闪烁到图像的左侧
文字字段下方有一个单行边框
键盘出现时，我看到溢出警告（底部溢出137像素）

[✓] Flutter（Channel beta，v0.4.4，Mac OS X 10.13.4 17E199，locale en-US）

非常感谢任何帮助。

Answer 1

堆栈并不是最好的选择。因为在堆栈中的位置可能会在屏幕之间变化。尝试以下代码：

Container(
  child: TextFormField(),
  decoration: BoxDecoration(
        image: DecorationImage(fit: BoxFit.cover,
          image: AssetImage("assets/images/desert.jpg",),
        ),
  ),
),

Answer 2

试试这个

new Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
    Image(
      image: AssetImage('assets/search_field.png'),
      width: 333.0,
      height: 43.0,
      fit: BoxFit.fill,
    ),
    Text("someText")
  ],
);

Answer 3

    new Container(
      height: 100.0,
      width: 100.0,
      alignment: Alignment.center,
      child: new Stack(alignment: Alignment.center, children: <Widget>[
        Image(image: AssetImage('assets/example.jpg')),
        TextField(
            textAlign: TextAlign.center,
            autocorrect: false,
            decoration:
                //disable single line border below the text field
                new InputDecoration.collapsed(hintText: 'Username')),
      ]),
    ),

TextField的背景图像 - 颤振

3 个答案: