Question

我想制作一张带有CircleAvatar的卡片，并伸出来（您可以在这张照片中看到详细信息）：

我不知道它是如何工作的：/我尝试使用Stack和“定位的小部件”进行操作，但是不起作用...

Answer 1

我还需要一张顶部带有圆形图像的卡片。从@RémiRousselet的答案中得到了一个想法。认为这也可能使您受益。

代码结果。

Stack(
  alignment: Alignment.topCenter,
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(top: 30),
      width: double.infinity,
      child: Card(
          color: Color(0xffeeeeee),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 40, bottom: 0, left: 10, right: 10),
                child: Column(
                  children: <Widget>[
                    Text("Dr. Maseed", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
                    Text("Dr. Maseed is a radiation oncologist in Indianapolis, Indiana and is affiliated with multiple hospitals in the area. He has been in practice for more than 20 years.", style: TextStyle()),
                    ButtonBar(children: <Widget>[
                      FlatButton(child: Text("APPOINTMENT", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),), onPressed: (){},)
                    ],)
                  ],
                ),
              )
            ],
          )),
    ),
    Utils.circularImageWithBorder(
        "assets/images/maseed.png", 30, 2, Colors.black),
  ],
),

返回圆形化身的静态方法。

static Widget circularImageWithBorder(String imgPath, double rad, double borderWidth, Color borderColor) {
  return CircleAvatar(
      radius: rad + borderWidth,
      backgroundColor: borderColor,
      child: CircleAvatar(
        backgroundImage: AssetImage(imgPath),
        radius: rad,
      ));
}

Answer 2

Stack确实是解决方案。

Stack(
  children: <Widget>[
    Card(
      margin: const EdgeInsets.only(top: 20.0),
      child: SizedBox(
          height: 100.0,
          width: double.infinity,
          child: Padding(
            padding: const EdgeInsets.only(top: 45.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Foo",
                  style: Theme.of(context).textTheme.subhead,
                ),
                Text("bar")
              ],
            ),
          )),
    ),
    Positioned(
      top: .0,
      left: .0,
      right: .0,
      child: Center(
        child: CircleAvatar(
          radius: 30.0,
          child: Text("D"),
        ),
      ),
    )
  ],
),

Answer 3

我认为@RémiRousselet的方法更好，但这是使用FractionalTranslation的另一种方法，因此您可以在CircleAvatar的位置上玩更多游戏

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 30.0),
      child: Container(
        child: new Stack(
          children: <Widget>[
            Card(
              child: Container(
                height: 100.0,
              ),
            ),
            FractionalTranslation(
              translation: Offset(0.0, -0.4),
              child: Align(
                child: CircleAvatar(
                  radius: 25.0,
                  child: Text("A"),
                ),
                alignment: FractionalOffset(0.5, 0.0),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

测试：

return Scaffold(
  appBar: AppBar(),
  body: ListView(
    children: <Widget>[
      CustomCard(),
      CustomCard(),
      CustomCard(),
    ],
  ),
);

Flutter：一张带有CircleAvatar的卡片，该卡片伸出

3 个答案: