数据表中的Flutter DropdownButton

问题描述

在扑朔迷离中，我试图让一个DataTable的列之一成为一个DropdownButton，用户可以在其中从DropdownButton中进行选择，它会更改该单元格的值（而不是其他任何单元格，因此请不要更改还是第一列）。

请参见以下示例代码（DropdownButton不会更改单元格值），同样在DartPad中。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,),home: DataTableDemo(),);
  }
}

class User {
  String firstName;
  String lastName;

  User({this.firstName,this.lastName});

  static List<User> getUsers() {
    return <User>[
      User(firstName: "Paul",lastName: "Rudd"),User(firstName: "Owen",lastName: "Wilson"),User(firstName: "Jonah",lastName: "Hill"),];
  }
}

class DataTableDemo extends StatefulWidget {
  DataTableDemo() : super();

  final String title = "Data Table Flutter Demo";

  @override
  DataTableDemoState createState() => DataTableDemoState();
}

class DataTableDemoState extends State<DataTableDemo> {
  List<User> users;
  

  @override
  void initState() {
    users = User.getUsers();
    super.initState();
  }

  List<String> lastNamesList = <String>[
    'Rudd','Wilson','Hill',];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('DropdownButton in DataTable'),body: SingleChildScrollView(
          scrollDirection: Axis.vertical,child: DataTable(
            columns: [
              DataColumn(
                label: Text("FirsT NAME"),numeric: false,tooltip: "This is First Name",DataColumn(
                label: Text("LAST NAME"),tooltip: "This is Last Name",],rows: users
                .map(
                  (user) => DaTarow(cells: [
                    DataCell(
                      Text(user.firstName),onTap: () {
                        print('Selected firstName: ${user.firstName}');
                      },DataCell(DropdownButton<String>(
                      value: user.lastName,onChanged: (String newValue) {
                        setState(() {
                          //help! 
                        });
                      },items: lastNamesList
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,child: Text(value),);
                      }).toList(),))
                  ]),)
                .toList(),));
  }
}

解决方法

您可以在下面复制粘贴运行完整代码
步骤1：您可以使用List selectedUser来记录每个选择
步骤2：使用selectedUser.asMap().entries.map获取index
代码段

List<User> selectedUser;
...
rows: selectedUser.asMap().entries.map((user) {
              int idx = user.key;
              print(idx);
              return DataRow(cells: [
                DataCell(
                  Text(selectedUser[idx].firstName),onTap: () {
                    print('Selected firstName: ${selectedUser[idx].firstName}');
                  },),DataCell(DropdownButton<User>(
                  value: selectedUser[idx],onChanged: (User newUser) {
                    setState(() {
                      selectedUser[idx] = newUser;
                    });
                  },items: users.map<DropdownMenuItem<User>>((User value) {
                    return DropdownMenuItem<User>(
                      value: value,child: Text(value.lastName),);
                  }).toList(),))
              ]);
            }).toList(),

工作演示

完整代码

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,home: DataTableDemo(),);
  }
}

class User {
  String firstName;
  String lastName;

  User({this.firstName,this.lastName});

  static List<User> getUsers() {
    return <User>[
      User(firstName: "Paul",lastName: "Rudd"),User(firstName: "Owen",lastName: "Wilson"),User(firstName: "Jonah",lastName: "Hill"),];
  }
}

class DataTableDemo extends StatefulWidget {
  DataTableDemo() : super();

  final String title = "Data Table Flutter Demo";

  @override
  DataTableDemoState createState() => DataTableDemoState();
}

class DataTableDemoState extends State<DataTableDemo> {
  List<User> users;
  List<User> selectedUser;

  @override
  void initState() {
    users = User.getUsers();
    selectedUser = List.from(users);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('DropdownButton in DataTable'),body: SingleChildScrollView(
          scrollDirection: Axis.vertical,child: DataTable(
            columns: [
              DataColumn(
                label: Text("FIRST NAME"),numeric: false,tooltip: "This is First Name",DataColumn(
                label: Text("LAST NAME"),tooltip: "This is Last Name",],rows: selectedUser.asMap().entries.map((user) {
              int idx = user.key;
              print(idx);
              return DataRow(cells: [
                DataCell(
                  Text(selectedUser[idx].firstName),));
  }
}

完整代码2，第一列的值不变

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',rows: users.asMap().entries.map((user) {
              int idx = user.key;
              print(idx);
              return DataRow(cells: [
                /*DataCell(
                  Text(selectedUser[idx].firstName),*/
                DataCell(
                  Text(user.value.firstName),onTap: () {
                    print('Selected firstName: ${user.value.firstName}');
                  },));
  }
}