如何使卡之间的身体扑腾的谎言

Question

有谁知道如何做类似图片的布局？我在CardView上有困难，它的位置是在主体之间。我还算是Flutter的新手，在UI部分有一些困难。完整的代码如下。

Widget build(BuildContext context) {
return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(45.0),
    child: AppBar(
      automaticallyImplyLeading: false,
      elevation: 0.0,
      centerTitle: true,
      backgroundColor: Color(0xFFED2849),
      leading: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(left: 8.0),
            child: GestureDetector(
                onTap: (){
                  Navigator.of(context).pop(null);
                },
                child: Image.asset('assets/ic_user_title_back.png', width: 12.0, height: 12.0,),
            ),
          ),
        ],
      ),
      title: Center(
        child: Container(
          child: Text(
            '账号中心',
            style:  TextStyle(color:  Color(0xFFFFFFFF), fontSize: 14),
          ),
        ),
      ),
      actions: <Widget>[
        Padding(
          padding: const EdgeInsets.only(right: 8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: GestureDetector(
                  onTap: (){
                    //logout
                  },
                  child: Text(
                    '退出登陆',
                    style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 11),
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    )
  ),
  body: SafeArea(
    top: false,
    child: Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 3,
            child: Container(
              color: Color(0xFFED2849),
            ),
          ),
          Expanded(
            flex: 7,
            child: Container(
              color: Color(0xFFF1F1F1),
            ),
          )
        ],
      ),
    ),
  )
);
}

Answer 1

你可以使用 堆栈

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
//        fit: StackFit.expand,
      children: [
       Column(
       children: [
          Expanded(
        flex: 3,
          child : Container(color: Colors.red)
        ),
        Expanded(
        flex: 7,
          child: Container(
          color : Colors.white)
        )
       ]
       ),
        Positioned(
          top: MediaQuery.of(context).size.height * 0.2,
          left: 20,
          right: 20,
        child:Card(

          child: Padding(
          padding : const EdgeInsets.all(16),
        child: Text("Your Text here", ),
        ),)
        )
      ],
      )

Answer 2

尝试使用 Stack() 它将允许你以一种简单的方式重叠几个孩子。