Flutter-常见的Cell布局设计02

要求,在常见的Cell布局设计01的基础进行更进一步的升级操作

import 'dart:convert';
import 'package:flutter/material.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,
                decoration: BoxDecoration(
                    color: Colors.limeAccent,
                    borderRadius: BorderRadius.circular(10),

                    ///设置圆角半径为10
                    border: Border.all(color: Colors.amber, width: 2)),

                ///设置边框样式
                child: CreateBigCell()),
          );
        });
  }

  ///开始布局cell
  Widget CreateBigCell() {
    return const Column(
      children: [
        Row(
          children: [
            ///Image用于显示图像，可以加载本地资源图像或从网络加载图像。
            ///Icon用于显示矢量图标，使用预定义的字体图标集。
            Expanded(
                child: Row(
                  children: [
                    Text(
                      "这是第二行数字",
                      style: TextStyle(color: Colors.orange, fontSize: 16),
                    ),
                    Icon(Icons.g_translate)
                  ],
                )),

            ///使用Flexible,如果文字过长,自动换行
            Flexible(
              child: Text(
                "Icon用于显示矢量图标，使用预定义的字体图标集Icon用于显示矢量图标，使用预定义的字体图标集",
                style: TextStyle(color: Colors.orange, fontSize: 16),
              ),
            ),
            Icon(Icons.ac_unit),
          ],
        ),
        ///使用Divider 处理分割线
        Padding(
          padding: EdgeInsets.only(left: 12, right: 12),
          child: Divider(
            height: 3,
            color: Colors.deepOrange,
          ),
        ),
        Row(
          children: [
            Expanded(
              child:Padding(padding: EdgeInsets.only(left: 12),child: Column(
                children: [
                  Text(
                    "111111",
                    style: TextStyle(color: Colors.grey, fontSize: 13),
                  ),
                  Text(
                    "6765765767",
                    style: TextStyle(color: Colors.grey, fontSize: 13),
                  )
                ],
                /// 设置交叉轴上子部件对齐到起始位置,不然就居中了
                crossAxisAlignment: CrossAxisAlignment.start,
              )),),
            Column(
              children: [
                Text(
                  "2222222",
                  style: TextStyle(color: Colors.grey, fontSize: 13),
                ),
                Text(
                  "zzzzzzzz",
                  style: TextStyle(color: Colors.grey, fontSize: 13),
                )
              ],
            ),
            SizedBox(width: 12,),
          ],
        ),
        SizedBox(height: 12,)
      ],
    );
  }

 
}