卡片布局 - 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的主要内容,如果未能解决你的问题,请参考以下文章

Flutter控件——布局控件:卡片

flutter-卡片组件布局

颤动布局中的卡片视图

ListView - 卡片(颤动布局)

Java AWT 图形界面编程LayoutManager 布局管理器 ⑤ ( CardLayout 卡片布局 | ActionListener 按钮点击事件添加 )

Java AWT 图形界面编程LayoutManager 布局管理器 ⑤ ( CardLayout 卡片布局 | ActionListener 按钮点击事件添加 )