美文网首页
flutter 表格布局

flutter 表格布局

作者: 喜剧收尾_XWX | 来源:发表于2020-08-25 10:29 被阅读0次
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "table表格布局",
      home: Scaffold(
        appBar: AppBar(
          title: Text("table"),
        ),
        body: Center(
          child: Table(
            //设置表格有多少列,并制定列宽
            columnWidths: const <int, TableColumnWidth>{
              //指定索引及固定列宽
              0: FixedColumnWidth(100.0),
              1: FixedColumnWidth(40.0),
              2: FixedColumnWidth(80.0),
              3: FixedColumnWidth(80.0),
            },

            //设置表格边框样式
            border: TableBorder.all(
                color: Colors.black26, width: 2.0, style: BorderStyle.solid),
            children: const <TableRow>[
              TableRow(children: <Widget>[
                Text('姓名'),
                Text('性别'),
                Text('年龄'),
                Text('体重'),
              ]),
              TableRow(children: <Widget>[
                Text('小红'),
                Text('女'),
                Text('20'),
                Text('50'),
              ]),
              TableRow(children: <Widget>[
                Text('小强'),
                Text('男'),
                Text('20'),
                Text('50'),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

相关文章

  • flutter 表格布局

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • Flutter-布局

    一、介绍 flutter布局需要先了解flutter所有布局的widget,首先flutter布局分为Contai...

  • 2019-03-15

    实验内容:关于线性布局、约束布局及表格布局的使用 主要代码: 主界面: 线性布局: 约束布局: 表格布局: 截图:...

  • Flutter-汇总

    Flutter(一)--Flutter安装遇到的问题汇总 Flutter(二)--布局机制、布局步骤、水平和垂直布...

  • Flutter旋转位移等操作

    flutter布局-5-Matrix4矩阵变换Flutter 布局(六)- SizedOverflowBox、Tr...

  • flutter布局-3-center

    Center 居中的布局 连载:flutter布局-1-column连载:flutter布局-2-row 只能有一...

  • DIV内容垂直居中

    《虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

  • flutter(六,页面布局篇)

    Tags: flutter Flutter页面布局篇 [TOC] 1. 布局及装饰组件说明 2. 基础布局处理 2...

网友评论

      本文标题:flutter 表格布局

      本文链接:https://www.haomeiwen.com/subject/nliydktx.html