叠加图像和Textfield抖动

时间:2020-05-25 13:50:53

标签: flutter flutter-layout

我有这样的设计,我每次提供的图像都会自动滚动,但是效果很好,但是当我尝试与文本字段重叠时,文本字段应该位于图像之间,就像Stacked一样,我尝试使用stack,但是textfield却没有不要移动到顶部,这是我正在获取的屏幕截图,请为此提供帮助

这就是我要得到的

This is what i am getting

代码

return Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                height: 180,
                width: double.infinity,
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return new Image.asset(
                      'assets/images/banner1.jpeg',
                      width: double.infinity,
                      fit: BoxFit.fitWidth,
                    );
                  },
                  itemCount: 3,
                  pagination: new SwiperPagination(
                      margin: new EdgeInsets.only(right: 200, bottom: 20)),
                  control: new SwiperControl(),
                  autoplay: true,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 0, left: 30, right: 30),
                child: TextField(
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.search),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                          color: Colors.orangeAccent[200], width: 4.0),
                      borderRadius: const BorderRadius.all(
                        const Radius.circular(30.0),
                      ),
                    ),
                  ),
                ),
              ),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      height: 110,
                      width: size.width,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: 10,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Container(
                              width: 100,
                              height: 100,
                              color: Colors.yellow,
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);

1 个答案:

答案 0 :(得分:1)

当前,TextField位于COlumn内,这就是它出现在图像下方的原因,您必须删除该代码并添加堆栈列表,

示例:

[dependencies]
winapi = { version = "0.3.8", features = ["winuser", "winbase"] }
scopeguard = "1.1.0"