flutter - 在颤动中动态创建以表格格式排列的单选按钮

Question

我基本上想创建一个充满动态创建的单选按钮的表格，我可以在其中处理它们的单独点击。

行标题和列标题都将包含它们自己的文本标题，并且随附的单元格包含单选按钮。

标签： flutterflutter-layout

Answer 1

我已经能够回答这个问题了。查找随附的代码和屏幕截图供您阅读。当屏幕为纵向时，滚动是水平的，而在横向模式下是垂直的。享受！

     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
      }
    }