如何在flutter中制作嵌套表

hwamh0ep  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(108)

因此,我想在Flutter中创建一个嵌套的Table Row,基本上是like this

class _MyHomeState extends State<MyHome> {
 var dat=" ";
 myTableRow(day,period1,period2,period3,period4,period5,period6,period7,period8)
 {
   return TableRow(
       children: [
         Text(day),
         Text(period1),
         Text(period2),
         Text(period3),
         Text(period4),
         Text(period5),
         Text(period6),
         Text(period7),
         Text(period8),
       ]
   );
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
            title: Text('Time Table App'),
      ),
      body: Container(
        margin: EdgeInsets.only(left: 30,right: 30),
          child:RotatedBox(
            quarterTurns: 3,
            child:Table(
        border: TableBorder.all(),
        children:[
           TableRow(
              children:[
                Text("COA"),
                TableRow(
                   children: [
                     Text("COA"),
                     Text("DSTL")
                             ]),
                  ])
            ])
    )));
  }
}

我做了一个函数,用于分离表格行,这样我就可以根据用户输入为任何或所有行给予文本样式...并旋转表格,使其不会对用户显得笨重...现在嵌套表格不适用于制作这样的表格,所以我是否使用列和行或表格行可以嵌套,但我没有正确地这样做?

aij0ehis

aij0ehis1#

因为TableRow接受任何children中的widget,你可以很容易地在一个表中嵌套一个表。请检查下面的代码,你可以在Dartpad中运行它。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Table(border: TableBorder.all(), children: [
            const TableRow(children: [
              Text('Column 1'),
              Text('Column 2'),
            ]),
            TableRow(children: [
              const Text('Entry 1'),
              Table(border: TableBorder.all(), children: const [
                TableRow(children: [
                  Text('Nested Entry 1'),
                  Text('Nested Entry 2'),
                ]),
                TableRow(children: [
                  Text('Nested Entry 3'),
                  Text('Nested Entry 4'),
                ]),
              ]),
            ]),
          ]),
        ),
      ),
    );
  }
}

相关问题