使用 Flutter/Dart 构建自定义卡片答案

【问题标题】：Building custom card using Flutter/Dart使用 Flutter/Dart 构建自定义卡片
【发布时间】：2019-08-17 01:36:23
【问题描述】：

我正在尝试使用 Dart/Flutter 小部件构建自定义卡片，下面是小部件的外壳，我在使用 Dart 定位元素时遇到问题！

卡片的宽度旨在占据整个屏幕的宽度，并能够在其中两个之间水平滚动，标题和内容使用 JSON 动态加载。

问：我目前正忙于构建这个特定的 UI，如何从下面提供的代码开始？

这是我所做的：

class BottomCards extends StatefulWidget {
  final String cardTitle;
  final String cardContent;
  BottomCards(this.cardTitle, this.cardContent);
  @override 
  _BottomCardsState createState() => _BottomCardsState();
}

class _BottomCardsState extends State<BottomCards>{
@override
Widget build(BuildContext context) {
  return Center(
    child: Card(
      child: InkWell(
        splashColor: Colors.blue.withAlpha(30),
        onTap: () {},
        child: Container(
          child: Padding( 
            padding: EdgeInsets.all(12.0),
            child: Row(
              children: <Widget>[
                Text(widget.cardTitle),
                Spacer(),
                new ButtonBar(
                  children: <Widget>[
                    new IconButton(
                      icon: Icon(CardsIcons.arrows_ccw),
                      //onPressed: REFRESH,
                    ),
                    new IconButton(
                      icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
                      //onPressed: BOOKMARK,
                    ),
                    new IconButton(
                      icon: Icon(CardsIcons.content_copy),
                      //onPressed: COPY,
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    ),
  );
 }
}

这是所需的输出

【问题讨论】：

标签： user-interface flutter dart cardview

【解决方案1】：

设置卡片的高度和宽度，你就可以开始了。

将高度设置为所需的高度。

如果您希望卡片占用屏幕宽度，请使用MediaQuery 获取屏幕宽度。喜欢，

width: MediaQuery.of(context).size.width

【讨论】：