堆栈与图像和文本字段颤动答案

【问题标题】：Stack with image & Textfield flutter堆栈与图像和文本字段颤动
【发布时间】：2020-05-25 13:50:53
【问题描述】：

我有这种设计，我每次都提供自动滚动的图像，它工作正常，但是当我尝试与文本字段重叠时，文本字段应该在图像之间作为堆叠，我尝试使用堆栈，但文本字段没有'不要移到顶部，这是我得到的截图，请帮助我

这就是我得到的

代码

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

【问题讨论】：

您的Stack 中只有一个Widget，一个Column。如果您希望 Column 中的元素相互堆叠，则必须将它们从 Column 到 Stack。

标签： flutter flutter-layout

【解决方案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),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

【讨论】：