dart 如何在Flutter中显示ListView Builder区域之外的列表数据?

j2datikz  于 2023-06-03  发布在  Flutter
关注(0)|答案(2)|浏览(171)

在技术上是否不可能显示列表之外的数据?我在互联网上搜索,但我根本找不到任何答案。
我想显示除了ListViewBuilder部分之外的列表数据行的值。
输出:
[ ListView生成器屏幕]
姓名:你,年龄:20姓名:他,年龄:20
一张输出照片在那里。enter image description here

String name = userList[index].name;
int? age = userList[index].age;
class _Passenger extends State<Passenger> {
  TextEditingController nameController = TextEditingController();
  TextEditingController ageController = TextEditingController();
  int currentIndex = 0;

  final form = GlobalKey<FormState>();
  bool update = false;
  final User user = User(name: "", age: int.tryParse(''));
  List<User> userList = [
    User(name: "You", age: 20),
    User(name: "Him", age: 20),
  ];
  String text = '';
  int? number = int.tryParse('');
  @override
  Widget build(BuildContext context) {
    return MaterialApp( debugShowCheckedModeBanner: false,
    home: Scaffold(
        body: Column(children: <Widget>[
      Column(
          children: <Widget>[
            Container(
              height: 550,
              decoration: BoxDecoration(border: Border.all(color: Colors.black)),
              child: ListView.builder(
                  itemCount: userList.length,
                  itemBuilder: (context, index) {
                    String name = userList[index].name;
                    int? age = userList[index].age;

                    return SizedBox(
                      width: 20,
                      child: Card(
                          color: Colors.grey,
                          child: Padding(
                              padding: const EdgeInsets.all(2.0),
                              child: ListTile(
                                title: Text( "Name: $name    Age: $age"),
                              ))),
                    );
                  }),
            ),
          ],
        ),
      Container( child: Text("Display the data here, How?") ),
      //Add Button
      Container(
          width: 150,
          height: 50,
          margin: const EdgeInsets.all(10),
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (context) => SimpleDialog(children: [
                        TextField(
                          decoration: const InputDecoration(labelText: 'Name'),
                          onChanged: (value) {
                            setState(() {
                              text = value;
                            });
                          },
                        ),
                        TextField(
                          keyboardType: TextInputType.number,
                          decoration: const InputDecoration(labelText: 'Age'),
                          onChanged: (value) {
                            setState(() {
                              number = int.parse(value);
                            });
                          },
                        ),
                        ElevatedButton(
                            onPressed: () {
                              setState(() {
                                userList.add(User(name: text, age: number));
                              });
                            },
                            child: const Text('Add'))
                      ]));
            },
            child: const Text("Add"),
          )),
    ])));
  }
}

class User {
  String name;
  int? age;
  User({
    required this.name,
    this.age,
  });
}
azpvetkf

azpvetkf1#

所以...如果是同一个列表,只需添加以下内容:
相反:

Container( child: Text("Display the data here, How?") )

执行:

SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: userList
                  .map((user) => Text("Name: ${user.name}, Age: ${user.age} "))
                  .toList(),
            ),
          ),

我添加了一个带有水平滚动的SingleChildScrollView来避免问题
要将用户列表发送到另一个页面,只需执行以下操作:

Navigator.push(
  context,
  MaterialPageRoute(
    settings: const RouteSettings(name: "no-route"),
    builder: (context) => OtherPage(userList: userList),
  ),
);

class OtherPage extends StatelessWidget {
  final List<User> userList;

  const OtherPage({
    required this.userList,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: userList
                    .map(
                        (user) => Text("Name: ${user.name}, Age: ${user.age} "))
                    .toList(),
              ),
    );
  }
}
mspsb9vt

mspsb9vt2#

如果要显示列表的行数,请替换

Container( child: Text("Display the data here, How?") )

Text("Number of rows: ${userList.length}")

如果你想在列表的末尾添加一些东西,你可以这样做:

ListView(
      shrinkWrap: true,
      physics: const AlwaysScrollableScrollPhysics(),
      children: <Widget>[
        ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                // everything else from your ListView.builder
        ),
        Text("Something different, inside scrollable list")

如果这不是你想要的,请编辑问题并明确预期结果。

相关问题