Flutter组件-Table-表格组件

https://i-blog.csdnimg.cn/blog_migrate/4b09c0c620e3641a731244c0946cc4dc.jpeg


import 'package:flutter/material.dart';

void main() => runApp(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(100.0),
                2: FixedColumnWidth(50.0),
              },
                //表格边框样式
            border: TableBorder.all(
                color: Colors.black,
                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('24'),

    ]
  ),

],
            ),
          ),
        ),
      ),
    );
  }

}

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值