Flutter组件-Table-表格组件

防采集标记:亢少军老师的课程和资料

Table效果图

在这里插入图片描述

示例代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Table组件',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Table组件'),
        ),
        body: Center(
          child: Container(
            //表格
            child: Table(
              //所有列宽
              columnWidths: const {
                //列宽
                0: FixedColumnWidth(100.0),
                1: FixedColumnWidth(200.0),
                2: FixedColumnWidth(50.0),
              },
              //表格边框样式
              border: TableBorder.all(
                color: Colors.green,
                width: 2.0,
                style: BorderStyle.solid,
              ),
              children: [
                TableRow(
                  //第一行样式 添加背景色
                  decoration: BoxDecoration(
                    color: Colors.grey,
                  ),
                  children: [
                    //增加行高
                    SizedBox(
                      height: 30.0,
                      child: Text('姓名',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
                    ),

                    Text('性别',style: TextStyle(fontWeight: FontWeight.bold),),
                    Text('年龄',style: TextStyle(fontWeight: FontWeight.bold),),
                  ]
                ),
                TableRow(
                    children: [
                      Text('张三'),
                      Text('男'),
                      Text('20'),
                    ]
                ),
                TableRow(
                    children: [
                      Text('小红'),
                      Text('女'),
                      Text('28'),
                    ]
                ),
                TableRow(
                    children: [
                      Text('李四'),
                      Text('男'),
                      Text('28'),
                    ]
                ),
                TableRow(
                    children: [
                      Text('机器猫'),
                      SizedBox(
                        width: 88.0,
                        height: 88.0,
                        child: Image.asset('assets/cat.jpeg'),
                      ),

                      Text('26'),
                    ]
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}



《Flutter技术入门与实战》 技术图书查看地址: http://product.dangdang.com/26485813.html
Flutter交流学习群:894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程:https://edu.csdn.net/lecturer/2436
在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亢少军

致力于跨平台技术开发

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值