android - Flutter 中使用 Stack 对齐容器

Question

我希望搜索(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')
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ]
          ),
        ),
      ),

我试图将它们全部放在一个 Stack 中，但它们相互堆叠，我无法将它们一个接一个地垂直排列。

Answer 1

我已经对您的代码进行了更改，以实现您想要实现的目标。请看一下:

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