Flutter Widget 之 Table

使用Flutter里GridView可以轻松制作可滚动的Widget 

但是你如果你不想滑动的的Widget呢？

这就是Table的用途

特别是如果你有不同大小的Widget

Column(  
    children: <Widget>[    
        Row(      
            children: <Widget>[        
                WideWidget(),        
                Padding(          
                    padding: EdgeInsets.symmetric(            
                        horizontal: 10.0,          
                    ),          
                    child: MediumWidget(),        
                ),        
                Padding(          
                    padding: EdgeInsets.symmetric(
                        horizontal: 10.0
                    ),          
                    child: MediumWidget(),       
                )      
              ],    
            ),    
        Row(      
            children: <Widget>[        
                Padding(          
                    padding: EdgeInsets.symmetric(            
                        horizontal: 10.0,          
                    ),          
                    child: MediumWidget(),        
                ),        
                Padding(          
                    padding: EdgeInsets.symmetric(
                        horizontal: 30.0
                    ),          
                child: NarrowWidget(),                        ),        
                Padding(          
                    padding: EdgeInsets.symmetric(
                        horizontal: 10.0
                    ),          
                    child: MediumWidget(),        
                ),      
            ],    
            ),  
    ],
);

就不需要建立你自己的自定义大小的行和列数。

表格可以调整子项的大小，已纳入其所有内容

Table(
    children: [
        TableRow(children:[
            WideWidget(),
            MediumWidget(),
            MediumWidget(),
        ]),
        TableRow(children:[
            MediumWidget(),
            NarrowWidget(),
            MediumWidget(),
        ]),
    ]
)

你可以指定Widget的对齐方向

defaultVerticalAlignment: TableCellVerticalAignment.top

defaultVerticalAlignment: TableCellVerticalAignment.middle

defaultVerticalAlignment: TableCellVerticalAignment.bottom

以及水平列的相对宽度

defaultColumnWidth: FlexColumnWidth(1.0)

defaultColumnWidth: FlexColumnWidth(.25)

defaultColumnWidth: FlexColumnWidth(30.0)

defaultColumnWidth: IntrinsicColumnWidth()

你可以使用columnWidths参数为各个列设置特定的行为

Table(
    border：TableBorder.all()，
    children: [
        TableRow(children:[
            WideWidget(),
            MediumWidget(),
            MediumWidget(),
        ]),
        TableRow(children:[
            MediumWidget(),
            NarrowWidget(),
            MediumWidget(),
        ]),
    ]
)

使用border参数在表格周围添加装饰

Table(
    columnWidths: {1: FractionColumnWidth(.2)}
    children: [
        TableRow(children:[
            WideWidget(),
            MediumWidget(),
            MediumWidget(),
        ]),
        TableRow(children:[
            MediumWidget(),
            NarrowWidget(),
            MediumWidget(),
        ]),
    ]
)

如果想了解有关Table的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址