列表磁贴中的布局-颤振

Question

当前输出：

预期输出：

代码：

SizedBox(
      width: 380,
      height: 180,
      child: Swiper(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              Expanded(
                child: Card(
                  child: ListTile(
                    title: Text(
                      '${items[index].title}',
                    ),
                    subtitle: Text(
                      '${items[index].body}',
                    ),
                    trailing: Column(
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: HexColor("#0087a8"),
                          child: IconButton(
                            icon: Icon(Icons.add),
                      ],
                    ),
                  ),
                ),
              )
            ],
          );
        },
        viewportFraction: 0.8,
        scale: 0.9,
        control: SwiperControl(color: Colors.white),
      ),
    );

我无法以这种方式创建图标按钮。当我放入填充时，它表示像素溢出。我需要在右下角获得添加按钮。

Answer 1

将自定义窗口小部件用于以下代码中的列表项或列，以用于单个视图。要左右对齐，您必须将视图置于“对齐”中，如下所示-

class _ItemsState extends State<Items> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            body: SizedBox(
                width: 380,
                height: 160,
                child: Card(
                    child: ListView.builder(
                        itemCount: 1,
                        itemBuilder: (context, index) {
                          return

                            Padding(padding: EdgeInsets.all(10.0),child:   Column(children: <Widget>[
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Column(children: <Widget>[
                                  Text(
                                    'title',
                                    style: TextStyle(fontSize: 20.0 , fontWeight: FontWeight.bold,),
                                  ),
                                  Text(
                                    'body',
                                    style: TextStyle(fontSize: 14.0),  )
                                ]),
                              ),
                              Align(
                                  alignment: Alignment.centerRight,
                                  child:  CircleAvatar(
                                      maxRadius: 20.0,
                                      backgroundColor: Colors.blueGrey,
                                      child: IconButton(
                                        icon: Icon(Icons.add,
color: Colors.white,),
                                      ))
                              )
                            ]));




                        }))));
      }
    }

Answer 2

尝试此代码

Container(
        height: 180,
        width: double.infinity,
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'EUR/USD',
                      style: TextStyle(fontSize: 40),
                    ),
                    Text('FOREX', style: TextStyle(fontSize: 20)),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    CircleAvatar(
                        backgroundColor: Colors.blueAccent,
                        child: IconButton(
                          onPressed: () {
                            print('On Pressed');
                          },
                          icon: Icon(Icons.add),
                        )),
                  ],
                )
              ],
            ),
          ),
        ),
      )

Answer 3

正如已经指出的那样，您不应为此使用ListTile，因为您不仅要使用标题和副标题作为内容，而且要使用

。

我在此处选择Stack而不是Column的原因是，它可以让您安全地在不同尺寸的屏幕上使用它，同时确保视图不会溢出。使用Column，它将限制按钮直径作为整个要使用的空间（垂直），即使它限制在框的右侧。

我相信这就是您想要的。

class MyListTile extends StatelessWidget {
  const MyListTile({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180.0,
      color: const Color(0xff0087a8),
      child: Container(
        padding: const EdgeInsets.all(20.0),
        margin: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: const Color.fromRGBO(19, 12, 117, 1.0),
        ),
        child: Stack(
          children: <Widget>[
            Text(
              'EUR - USD',
              style: Theme.of(context).textTheme.display2.copyWith(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'Forex',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: FloatingActionButton(
                backgroundColor: const Color(0xff0087a8),
                onPressed: () {},
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 50.0,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}