Flutter：一张带有 CircleAvatar 的卡片，突出答案

【问题标题】：Flutter: A Card with a CircleAvatar, which stick outFlutter：一张带有 CircleAvatar 的卡片，突出
【发布时间】：2018-12-22 22:06:36
【问题描述】：

我想制作一张带有CircleAvatar的卡片，它很突出（你可以在这张照片中看到细节）：

我不知道，它是如何工作的：/ 我尝试使用 Stack 和 Positioned Widget，但它没有工作...

【问题讨论】：

标签： dart flutter

【解决方案1】：

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"),
        ),
      ),
    )
  ],
),

【讨论】：

我如何让蓝色圆圈 D 伸出顶部？
这太奇怪了，这里的图像看起来不像突出，但当我使用它时，它是。谢谢你的大提示！
但是...当我调整 CircleAvatar 的大小时，它现在只是稍微突出了顶部。我尝试在顶部使用负数，但它确实有帮助。
这行得通，Align 可以超出 -1.0 的负数：```Align(alignment: Alignment(0, -1.2), child: CircleAvatar( radius: 30.0, child: Center( //alignment) : Alignment(0, 0), child: Text("Room 33"), ), ), ),`

【解决方案2】：

我认为@Rémi Rousselet 的方式更好，但这是使用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(),
    ],
  ),
);

【讨论】：

【解决方案3】：

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

代码结果。

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

【讨论】：