如何在Flutter中使用DropdowndownButton在DataTable中显示一行？

如何解决如何在Flutter中使用DropdowndownButton在DataTable中显示一行？

在 Flutter 中，我试图只有一行包含列，如果我使用 DropdownButton 选项更改姓氏，请更改名字列。

代替：

我想：

完整代码：

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),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(),));
  }
}

解决方法

这是您需要的吗？

变化：

1. 在 StatefulWidget 的状态下，我保留一个 User selectedUser 而不是 List<User> selectedUser
2. 我只是在 DataRow 上为 selectedUser 创作

完整源代码

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(
      debugShowCheckedModeBanner: false,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;
  User selectedUser;

  @override
  void initState() {
    users = User.getUsers();
    selectedUser = users.first;
    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: [
            DataRow(
              cells: [
                DataCell(
                  Text(selectedUser.firstName),onTap: () {
                    print('Selected firstName: ${selectedUser.firstName}');
                  },DataCell(
                  DropdownButton<User>(
                    value: selectedUser,onChanged: (User newUser) {
                      setState(() {
                        selectedUser = newUser;
                      });
                    },items: users.map<DropdownMenuItem<User>>((User value) {
                      return DropdownMenuItem<User>(
                        value: value,child: Text(value.lastName),);
                    }).toList(),);
  }
}