叠加图片&文本字段飘动。

Question

我有这样一个设计，我提供的图片每次都会自动滚动，它工作得很好，但当我试图与文本字段重叠，使文本字段应该在图像之间的堆叠，我试过用堆叠，但文本字段没有移动到顶部，这是屏幕截图，我得到的，请帮助我在这一点上。

这是我所得到的

编码

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,
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);

Answer 1

目前，TextField在COlumn里面，这就是为什么它出现在图片下面的原因，你必须删除这段代码，并添加堆栈列表。

例如：

return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    height: 180,
                    width: double.infinity,
                    child: new Image.asset(
                      'assets/images/image.jpg',
                      width: double.infinity,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          height: 110,
                          width: 40,
                          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,
                                ),
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(left: 30, right: 30, top: 150),
                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),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );