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

Question

我正在尝试使用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,
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    ),
  );
 }
}

这是期望的输出

- Thorvald

Answer 1

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

将高度设置为您想要的高度。

如果您希望卡片有屏幕的宽度，请使用MediaQuery获取屏幕的宽度。例如：

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

- Arjunraj kokkadan