Flutter 数据表中的颤振下拉按钮

在Flatter中，我试图让DataTable中的一列成为DropdownButton，用户可以从DropdownButton中进行选择，它会更改该单元格的值（而不是任何其他单元格，因此根本不更改第一列中的值）

请参见下面的示例代码（DropdownButton不会更改单元格值），也可参见

void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：DataTableDemo（），
);
}
}
类用户{
字符串名；
字符串lastName；
用户（{this.firstName，this.lastName}）；
静态列表getUsers（）{
返回[
用户（姓：“保罗”，姓：“陆克文”），
用户（姓：“欧文”，姓：“威尔逊”），
用户（名：“约拿”，姓“希尔”），
];
}
}
类DataTableDemo扩展了StatefulWidget{
DataTableDemo（）：super（）；
最终字符串title=“数据表颤振演示”；
@凌驾
DataTableDemoState createState（）=>DataTableDemoState（）；
}
类DataTableDemoState扩展了状态{
列出用户名单；
@凌驾
void initState（）{
users=User.getUsers（）；
super.initState（）；
}
List lastNamesList=[
“陆克文”，
“威尔逊”，
"山",，
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（'DataTable中的DropdownButton'），
),
正文：SingleChildScrollView(
滚动方向：轴垂直，
子：数据表(
栏目：[
数据列(
标签：文本（“名字”），
数字：false，
工具提示：“这是名字”，
),
数据列(
标签：文本（“姓氏”），
数字：false，
工具提示：“这是姓氏”，
),
],
行：用户
.地图(
（用户）=>数据行（单元格：[
数据单元(
文本（user.firstName），
onTap:（）{
打印（'Selected firstName:${user.firstName}'）；
},
),
数据单元（下拉按钮(
值：user.lastName，
onChanged:（字符串newValue）{
设置状态（）{
//救命啊！
});
},
项目：最新名称列表
.map（（字符串值）{
返回下拉菜单项(
价值：价值，
子项：文本（值），
);
}).toList（），
))
]),
)
.toList（），
),
));
}
}

您可以复制粘贴运行下面的完整代码
步骤1：您可以使用

列表
selectedUser
记录每个选择

步骤2：使用
selectedUser.asMap（）.entries.map
获取
索引


代码片段

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

列出所选的用户；
...
行：selectedUser.asMap（）.entries.map（（用户）{
int idx=user.key；
打印（idx）；
返回数据行（单元格：[
数据单元(
文本（已选择用户[idx].firstName），
onTap:（）{
打印（'Selected firstName:${selectedUser[idx].firstName}'）；
},
),
数据单元（下拉按钮(
值：selectedUser[idx]，
onChanged:（用户newUser）{
设置状态（）{
selectedUser[idx]=新用户；
});
},
项：users.map（（用户值）{
返回下拉菜单项(
价值：价值，
子项：文本（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"),
                numeric: false,
                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(),
          ),
        ));
  }
}

import'包：equalable/equalable.dart'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：DataTableDemo（），
);
}
}
类用户{
字符串名；
字符串lastName；
用户（{this.firstName，this.lastName}）；
静态列表getUsers（）{
返回[
用户（姓：“保罗”，姓：“陆克文”），
用户（姓：“欧文”，姓：“威尔逊”），
用户（名：“约拿”，姓“希尔”），
];
}
}
类DataTableDemo扩展了StatefulWidget{
DataTableDemo（）：super（）；
最终字符串title=“数据表颤振演示”；
@凌驾
DataTableDemoState createState（）=>DataTableDemoState（）；
}
类DataTableDemoState扩展了状态{
列出用户名单；
列出所选用户；
@凌驾
void initState（）{
users=User.getUsers（）；
selectedUser=List.from（用户）；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（'DataTable中的DropdownButton'），
),
正文：SingleChildScrollView(
滚动方向：轴垂直，
子：数据表(
栏目：[
数据列(
标签：文本（“名字”），
数字：false，
工具提示：“这是名字”，
),
数据列(
标签：文本（“姓氏”），
努姆
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"),
                numeric: false,
                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(),
          ),
        ));
  }
}

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"),
                numeric: false,
                tooltip: "This is Last Name",
              ),
            ],
            rows: users.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(
                  Text(user.value.firstName),
                  onTap: () {
                    print('Selected firstName: ${user.value.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(),
          ),
        ));
  }
}