【发布时间】：2018-09-11 18:14:04
【问题描述】：
我基本上想创建一个充满动态创建的单选按钮的表格，我可以在其中处理它们的单独点击。
行标题和列标题都将包含它们自己的文本标题，并且随附的单元格包含单选按钮。
【问题讨论】：
-
这听起来像是在要求某人为您编写代码。如果你说出你想做什么，展示你的研究和代码，并告诉我们你得到了什么结果，你会得到更多的关注。
-
@jdv 我已经找到了解决办法
【发布时间】：2018-09-11 18:14:04
【问题描述】：
我已经能够回答这个问题了。查找随附的代码和屏幕截图供您阅读。当屏幕为纵向时，滚动是水平的，而在横向模式下是垂直的。享受吧！
import 'package:flutter/material.dart';
class TableView extends StatefulWidget {
@override
_TableViewState createState() => _TableViewState();
}
class _TableViewState extends State<TableView> {
List rowHeaders = new List();
List columnHeaders = new List();
Map selected = new Map();
@override
void initState() {
super.initState();
saveHeaders(); //Iterate and store all Row and column Headers
}
saveHeaders() {
//Saving All Headers
columnHeaders.addAll(["Excellent", "Very Good", "Good", "Poor"]);
rowHeaders.addAll(["MTN", "Vodafone", "Tigo", "Expresso", "Glo"]);
}
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: new Text("TableView"),
),
body: new OrientationBuilder(builder: (context, orientation) {
return Center(
child: SingleChildScrollView(
scrollDirection: orientation ==
Orientation
.portrait //Handle Scroll when Orientation is changed
? Axis.horizontal
: Axis.vertical,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
color: Colors.blueGrey[200],
padding: EdgeInsets.only(top: 20.0, bottom: 10.0),
alignment: FractionalOffset.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//headers
new Container(
margin: EdgeInsets.all(0.0),
child: new Row(
children: [
new Container(
alignment: FractionalOffset.center,
width: 140.0,
margin: EdgeInsets.all(0.0),
padding: const EdgeInsets.only(
top: 5.0, bottom: 5.0, right: 3.0, left: 3.0),
child: Text(
//Leave an empty text in Row(0) and Column (0)
"",
style: TextStyle(color: Colors.grey[800]),
textAlign: TextAlign.center,
),
)
]..addAll(columnHeaders
.map((header) => new Container(
alignment: FractionalOffset.center,
width: 120.0,
margin: EdgeInsets.all(0.0),
padding: const EdgeInsets.only(
top: 5.0,
bottom: 5.0,
right: 3.0,
left: 3.0),
child: new Text(
header,
style:
TextStyle(color: Colors.grey[800]),
textAlign: TextAlign.center,
),
))
.toList())),
),
],
),
)
]..addAll(createRows()), //Create Rows
),
));
}));
}
List<Widget> createRows() {
List<Widget> allRows = new List(); //For Saving all Created Rows
for (int i = 0; i < rowHeaders.length; i++) {
List<Widget> singleRow = new List(); //For creating a single row
for (int j = 0; j < columnHeaders.length; j++) {
singleRow.add(Container(
alignment: FractionalOffset.center,
width: 120.0,
padding: const EdgeInsets.only(
top: 6.0, bottom: 6.0, right: 3.0, left: 3.0),
child: Radio(
value: j, //Index of created Radio Button
groupValue: selected[rowHeaders[i]] !=
null //If groupValue is equal to value, the radioButton will be selected
? selected[rowHeaders[i]]
: "",
onChanged: (value) {
this.setState(() {
selected[rowHeaders[i]] =
value; //Adding selected rowName with its Index in a Map tagged "selected"
print("${rowHeaders[i]} ==> $value");
});
},
)));
}
//Adding single Row to allRows widget
allRows.add(new Container(
child: new Row(
children: [
new Container(
alignment: FractionalOffset.centerLeft,
width: 140.0,
padding: const EdgeInsets.only(
top: 6.0, bottom: 6.0, right: 3.0, left: 10.0),
child:
Text(rowHeaders[i], style: TextStyle(color: Colors.grey[800])),
)
]..addAll(singleRow), //Add single row here
)));
}
return allRows; //Return all single rows
}
}
【讨论】：
首先你必须创建一个带有合适标识符的数组类型的单选按钮： 3 * 3 单选按钮表 就像这样：
* * *
* * *
* * *
RadioButton [,] r=new RadioButton[3,3];
然后设置位置并调用 in 的初始化方法：
for(int i=0;i<3;i++)
{
for(int j=0;j<3;j++)
{
r[i,j]=new RadioButton();
r[i,j].Tag=I.toString()+"-"+j.toString();
r[i,j].top=30+j*30;
r[i,j].top=30+i*30;
r[i,j].click+=new EvantHandler(*/the method that you whant to call when click in each radio button*/);
}
}
当事件处理方法被调用时，你可以很容易地找到点击了哪个单选按钮！来自每个单选按钮的标签值
【讨论】：