gpt4 book ai didi

flutter - 堆栈与图像和文本字段 flutter

转载 作者:行者123 更新时间:2023-12-04 09:51:51 26 4
gpt4 key购买 nike

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

这就是我得到的

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

最佳答案

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

关于flutter - 堆栈与图像和文本字段 flutter ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62003815/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com