Mobile 卡片布局-颤振

我正在尝试使用flutter构建一张卡，它看起来像下面所示的概念，但是我得到了这个

以下是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,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

@覆盖
小部件构建（构建上下文）{
返回中心(
孩子：卡片(
边缘：边缘组。对称（水平：14.0），
颜色：颜色，白色，
标高：6.0，
孩子：InkWell(
飞溅颜色：颜色。蓝色。带有alpha（30），
onLongPress:（{u copy（）；}），
onTap:（）{}，
子：容器(
儿童：填充（
填充：所有边缘设置（12.0），
孩子：排(
儿童：[
文本（widget.cardTitle），
垫片（），
钮扣杆(
儿童：[
新图标按钮(
图标：图标（CardsIcons.arrows_ccw，颜色：primaryDark，），
onPressed:（）{u refresh（）；}，
),
新图标按钮(
图标：图标（CardsIcons.heart\u空，颜色：Colors.redAccent，），
按下：（{u bookmark（）；}），
),
],
),
尺寸箱（高度：24.0，），
正文(
widget.cardContent，
),
],
),
),
),
),
),
);
}

这是我当前获得的输出

这是所需的输出

---

您的结构很接近，但要获得布局，您需要先将所有内容包装在一个列小部件中，其中包含行的子项，然后是文本

下面的代码应该是一个很好的开始，您只需要调整填充/文本样式等，使其像您的模型一样

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

@覆盖
小部件构建（构建上下文）{
返回中心(
孩子：卡片(
边缘：边缘组。对称（水平：14.0），
颜色：颜色，白色，
标高：6.0，
孩子：InkWell(
飞溅颜色：颜色。蓝色。带有alpha（30），
onLongPress:（{u copy（）；}），
onTap:（）{}，
子：容器(
儿童：填充（
填充：所有边缘设置（12.0），
子：列(
儿童：[
划船(
儿童：[
文本（widget.cardTitle），
垫片（），
钮扣杆(
儿童：[
新图标按钮(
图标：图标（CardsIcons.arrows_ccw，颜色：primaryDark，），
onPressed:（）{u refresh（）；}，
),
新图标按钮(
图标：图标（CardsIcons.heart\u空，颜色：Colors.redAccent，），
按下：（{u bookmark（）；}），
),
],
),
尺寸箱（高度：24.0，），
],
),
容器(
子：文本(
widget.cardContent，
),
),
],
),
),
),
),
),
);
}

如何将卡放置在底部？（位于底部导航栏的正上方）align小部件将完成此任务。这里有一些关于不同方法的讨论