在 Flutter 中使用 Stack 来对齐容器
Him*_*rma 6 stack android alignment dart flutter
我希望搜索（TextFormField）栏看起来像这样，并且背景图像在容器中弯曲：
这是代码，我尝试将容器和搜索栏堆叠在一起，然后使用定位对齐搜索栏，但无法做到这一点。
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
color:Colors.blueAccent,
height:250.0,
/*decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15.0))
),*/
//child: Image.asset("assets/bgImage.jpg"),
),
Positioned(
top: 155.0,
right: 0.0,
left: 0.0,
child: Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
/*suffixIcon: IconButton(
icon: Icon(
Icons.clear,
),
onPressed: _clearSearch,
),*/
filled: true,
),
//onSubmitted :
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0,),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
),
我试图将它们全部覆盖在一个堆栈中，但它们相互堆叠，我无法将它们一个接一个地垂直排列。
我已对您的代码进行了更改以实现您想要实现的目标。请看一下：
SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(30,8),
bottomRight: Radius.elliptical(30,8),
),
color:Colors.blueAccent,
),
//child: Image.asset("assets/bgImage.jpg"),
),
Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.only(top: 223, left: 55, right: 55),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
filled: true,
),
//onSubmitted :
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0, top: 20),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
);
| 归档时间： |
|
| 查看次数： |
8515 次 |
| 最近记录： |