Flutter Warp 组件的用法

44 阅读1分钟
ListView(
  children: [
    Padding(
      padding: EdgeInsets.all(10.r),
      child: Wrap(
        spacing: 10.r,
        runSpacing: 10.r,
        children: logic.state.list.map((e) {
          return Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.r),
              border: Border.all(width: 1.r),
            ),
            width: (Kit.device.screenWidth - 40.r) / 3,
            height: (Kit.device.screenWidth - 40.r) / 3 + 70.r,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  height: (Kit.device.screenWidth - 40.r) / 3,
                  width: double.infinity,
                  child: Image.asset(
                    e["image"],
                    package: "roll_call",
                    fit: BoxFit.cover,
                  ),
                ),
                Text(e["name"]),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.close,
                        color: Colors.red,
                      ),
                    ),
                    IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.check,
                        color: Colors.green,
                      ),
                    )
                  ],
                )
              ],
            ),
          );
        }).toList(),
      ),
    )
  ],
)