颤振上的自定义卡布局

Question

我想创建自定义卡片布局或iPad和平板电脑

到目前为止，这是我编写的代码

Widget _buildListItem(BuildContext context) {
return new Container(
    child: ListView(
  children: <Widget>[
    Card(
      elevation: 2,
      child: ClipPath(
        child: Container(
            height: 70,
            decoration: BoxDecoration(
                border: Border(
                    right:
                        BorderSide(color: Colors.lightGreen, width: 30))),
            child: Container(
              height: 70,
              child: Container(
                  alignment: Alignment(1.16, 0),
                  child: Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.black,
                    size: 24.0,
                    semanticLabel: 'wweqweqwe',
                  )),
            )),
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(3))),
      ),
    )
  ],
));

}}

我是新手，请帮助我构建这个。

Answer 1

尝试一下

Container(
                          height: 60,
                          width: MediaQuery.of(context).size.width,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                              color: Colors.white),
                          child: Container(
                            child: Row(
                              children: <Widget>[
                                Container(
                                    height: 60,
                                    width: 50,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(15),
                                          bottomLeft: Radius.circular(15),
                                        ),
                                        color: Colors.blue),
                                    child: Icon(
                                      Icons.arrow_forward_ios,
                                      color: Colors.black,
                                      size: 24.0,
                                      semanticLabel: 'wweqweqwe',
                                    )),
                                Expanded(
                                    child: Padding(
                                  padding:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    mainAxisSize: MainAxisSize.min,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: <Widget>[
                                      Text('Text One'),
                                      Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        mainAxisSize: MainAxisSize.min,
                                        children: <Widget>[
                                          Text('Text Two'),
                                          Text('Text Three'),
                                        ],
                                      )
                                    ],
                                  ),
                                )),
                                Container(
                                    height: 60,
                                    width: 30,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                          topRight: Radius.circular(15),
                                          bottomRight: Radius.circular(15),
                                        ),
                                        color: Colors.blue),
                                    child: Icon(
                                      Icons.arrow_forward_ios,
                                      color: Colors.black,
                                      size: 24.0,
                                      semanticLabel: 'wweqweqwe',
                                    )),
                              ],
                            ),
                          ))

输出

Answer 2

这里是不进行任何手势检测的示例，如果要添加一些手势，请用GestureDetector或GestureDetector包装。

Inkwell

您可以在Inkwell中测试此代码