卡片布局 - Flutter
Posted
技术标签:
【中文标题】卡片布局 - Flutter【英文标题】:Card layouts - Flutter 【发布时间】:2019-12-24 04:58:27 【问题描述】:我正在尝试使用颤振构建一张卡片,看起来像下面显示的概念,但我得到了这个。
这是 Dart 中的卡片小部件代码:
@override
Widget build(BuildContext context)
return Center(
child: Card(
margin: EdgeInsets.symmetric(horizontal: 14.0),
color: Colors.white,
elevation: 6.0,
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onLongPress: () _copy();,
onTap: () ,
child: Container(
child: Padding(
padding: EdgeInsets.all(12.0),
child: Row(
children: <Widget>[
Text(widget.cardTitle),
Spacer(),
ButtonBar(
children: <Widget>[
new IconButton(
icon: Icon(CardsIcons.arrows_ccw, color: primaryDark,),
onPressed: () _refresh();,
),
new IconButton(
icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
onPressed: () _bookmark();,
),
],
),
SizedBox(height: 24.0,),
Text(
widget.cardContent,
),
],
),
),
),
),
),
);
这是我目前得到的输出
这是所需的输出
【问题讨论】:
【参考方案1】:您的结构很接近,但要获得布局,您需要先将所有内容包装在一个 Column 小部件中,其中包含您的行的子小部件,然后是文本。
下面的代码应该是一个好的开始,您只需要调整填充/文本样式等就可以让它像您的模型一样
@override
Widget build(BuildContext context)
return Center(
child: Card(
margin: EdgeInsets.symmetric(horizontal: 14.0),
color: Colors.white,
elevation: 6.0,
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onLongPress: () _copy();,
onTap: () ,
child: Container(
child: Padding(
padding: EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(widget.cardTitle),
Spacer(),
ButtonBar(
children: <Widget>[
new IconButton(
icon: Icon(CardsIcons.arrows_ccw, color: primaryDark,),
onPressed: () _refresh();,
),
new IconButton(
icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
onPressed: () _bookmark();,
),
],
),
SizedBox(height: 24.0,),
],
),
Container(
child: Text(
widget.cardContent,
),
),
],
),
),
),
),
),
);
【讨论】:
我怎样才能把卡片放在底部? (底部导航栏正上方) 对齐小部件可以解决问题。这里有一些关于不同方法的讨论***.com/questions/45746636/…以上是关于卡片布局 - Flutter的主要内容,如果未能解决你的问题,请参考以下文章
Java AWT 图形界面编程LayoutManager 布局管理器 ⑤ ( CardLayout 卡片布局 | ActionListener 按钮点击事件添加 )
Java AWT 图形界面编程LayoutManager 布局管理器 ⑤ ( CardLayout 卡片布局 | ActionListener 按钮点击事件添加 )