【发布时间】:2021-01-25 16:37:08
【问题描述】:
我正在尝试添加一个标题卡,它将显示在颤动卡的左上角,到目前为止我还无法实现。 This is an example of what I want
【问题讨论】:
标签: flutter material-design flutter-layout
我正在尝试添加一个标题卡,它将显示在颤动卡的左上角,到目前为止我还无法实现。 This is an example of what I want
【问题讨论】:
标签: flutter material-design flutter-layout
作为 Flutter 的新手,我不知道有 Stack 小部件。解决方案是将两张卡片堆叠在 Positioned 小部件中。
class SummaryCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
left: 0,
top: 40,
height: 200,
width: 350,
child: Card(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),
),
Positioned(
left: 20,
top: 0,
height: 100,
width: 100,
child: Card(
color: Colors.green,
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),
),
],
);
}
}
【讨论】:
你需要用 Align Widget 包裹 header card。
这是完整的代码:
class Cards extends StatefulWidget {
@override
_CardsState createState() => _CardsState();
}
class _CardsState extends State<Cards> {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 200,
child: Card(
elevation: 20,
child: Align(
alignment: Alignment.topLeft,
child: Container(
width:100,
height: 60,
child: Card(
elevation: 10,
child: Text("header"),
),
),
),
),
);
}
}
容器仅用于高度和宽度控制。
【讨论】: