Flutter-常见的Cell布局设计01

要求:Cell圆角,距离上下左右都有12的间距,cell和Cell之间必须要有间隔

import 'dart:convert';
import 'package:flutter/material.dart';
import 'httpUtil.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Container(
        child: CreateListView(),
        color: Colors.white,
      ),
    );
  }

  ///创建列表
  Widget CreateListView() {
    ///如果想要列表都有间隙 得使用ListView.separated,而不是 ListView.build
    return ListView.separated(
        separatorBuilder: (BuildContext context, int index) {
          return SizedBox(
            height: 12,
          );
        },
        itemCount: 122,

        ///列表项的数量
        itemBuilder: (BuildContext context, int index) {
          ///构建每个列表项的小部件
          return CreateCell();
        });
  }

  ///创建具体的Cell
  Widget CreateCell() {
    ///如果高度不固定,使用LayoutBuideer包装起来
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          ///让cell距离上下左右都有间距,最外层得用Padding包装起来,才有效,不能在Container操作
          return Padding(padding: EdgeInsets.all(12),child: Container(
            height: 44,
            /*
        不能同时为container 和 decoration 设置颜色,否报错 The following assertion was thrown building LayoutBuilder:
        // Cannot provide both a color and a decoration
        // To provide both, use "decoration: BoxDecoration(color: color)".
        // 'package:flutter/src/widgets/container.dart':
        // Failed assertion: line 269 pos 15: 'color == null || decoration == null'
        */
            // color: Colors.black12,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                color:Colors.green ,
                borderRadius: BorderRadius.circular(10),///设置圆角半径为10
                border: Border.all(color: Colors.amber, width: 2)) ,///设置边框样式
            child:
            Text("data", style: TextStyle(color: Colors.brown, fontSize: 16)),
          ),);
        });
  }

}