[英]Is there a widget that supports rowspan and colspan in flutter?
I'm trying to create a table in flutter using Table widget but I can't find a way to merge its cells.我正在尝试使用 Table 小部件在颤振中创建一个表格,但我找不到合并其单元格的方法。
Table(border: TableBorder.all(color: Colors.red),children: [
TableRow(children: [
Text("item 1"),
Text("item 2"),
]),
TableRow(children: [
Text("item 3"),
Text("item 4"),
]),
]),
Is there a Widget that supports rowspan and colspan?有支持 rowspan 和 colspan 的 Widget 吗?
I think that is still not really possible to do that right now.我认为现在仍然不可能做到这一点。 what you can do though is putting 2 tables next to each other to get the result you are working on, like this:
您可以做的是将 2 个表并排放置以获得您正在处理的结果,如下所示:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: Scaffold(body: Example())));
}
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
width: 100.0,
color: Colors.cyan,
child: Table(
children: [
TableRow(children: [
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
child: const Text("1111111111111111111111111111111111111111111"),
),
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
child: const Text("2"),
),
]),
TableRow(children: [
Container(
color: Colors.deepPurple,
width: 50.0,
height: 50.0,
child: const Text("5"),
),
Container(
color: Colors.cyan,
width: 50.0,
height: 50.0,
child: const Text("6"),
),
]),
TableRow(children: [
Container(
color: Colors.amberAccent,
width: 50.0,
height: 50.0,
child: const Text("7"),
),
Container(
color: Colors.black87,
width: 50.0,
height: 50.0,
child: const Text("8"),
),
]),
],
),
),
Container(
width: 100.0,
color: Colors.cyan,
child: Table(
columnWidths: const {
1: FractionColumnWidth(.3),
},
children: [
TableRow(children: [
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
child: const Text("1111111111111111111111111111111111111111111"),
),
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
child: const Text("2"),
),
]),
TableRow(children: [
Container(
color: Colors.deepPurple,
width: 50.0,
height: 100.0,
child: const Text("5"),
),
Container(
color: Colors.cyan,
width: 50.0,
height: 100.0,
child: const Text("6"),
),
]),
],
),
),
],
);
}
}
Result:结果:
Result You use row and column.结果您使用行和列。 You must define unity ( width & height) of row and column.
您必须定义行和列的统一(宽度和高度)。
double unityWidth = 70;
double unityHeight = 40;
// 2 unity = two rows or columns merge
return Scaffold(
appBar: AppBar(
title: Text("Merge Data Table"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Column(
children: [
Row(
children: [
Container(
width: unityWidth*2,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFEEEEEE)
),
child: Center(
child: Text('Items'),
),
),
Container(
width: unityWidth,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFEEEEEE)
),
child: Center(
child: Text('Percent'),
),
),
],
),
Row(
children: [
Container(
width: unityWidth*2,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFFFFFFF)
),
child: Center(
child: Text('Items 1'),
),
),
Container(
width: unityWidth,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFFFFFFF)
),
child: Center(
child: Text('20%'),
),
),
],
),
Row(
children: [
Container(
width: unityWidth*2,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFFFFFFF)
),
child: Center(
child: Text('Items 2'),
),
),
Container(
width: unityWidth,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFFFFFFF)
),
child: Center(
child: Text('50%'),
),
),
],
),
],
),
Column(
children: [
Row(
children: [
Container(
width: unityWidth*2,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFEEEEEE)
),
child: Center(
child: Text('Price'),
),
),
Container(
width: unityWidth,
margin: EdgeInsets.zero,
height: unityHeight,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFEEEEEE)
),
child: Center(
child: Text('Other'),
),
),
],
),
Row(
children: [
Container(
width: unityWidth*2,
margin: EdgeInsets.zero,
height: unityHeight*2,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFFFFFFF)
),
child: Center(
child: Text('1888'),
),
),
Container(
width: unityWidth,
margin: EdgeInsets.zero,
height: unityHeight*2,
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFBCBCBC)),
color: Color(0xFFFFFFFF)
),
child: Center(
child: Text('20%'),
),
),
],
),
],
),
],
))
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.