Question

我有一个屏幕分成两半。上半部分具有一个列表视图，下半部分将基于上方列表视图中listTile中的 onTap：显示详细信息。

除去所有不相关的部分后，我的代码如下所示：

return Scaffold(
  appBar: AppBar(
    ...
    // app bar details
      ...
    ), // AppBar

body: SingleChildScrollView (
        child: Column(
            children: <Widget>[ 
             ...
             Container(
                ...
                child: populatelistview();
                ), 

             SizedBox(height: ...),
              ...
              ...
             Container(
                ...
                child: detailsView();
                ),
             ... 
            ],
          ), // Column
     ) // SingleChildScrollView

因此，为了从listview中获取基于onTap（）的数据填充的detailsView，我必须将一些变量（或某些id）从listview传递到detailsView。

我以前使用过Navigator.push（请参阅https://flutter.dev/docs/cookbook/navigation/passing-data），但这仅在从一个屏幕移动到另一个屏幕时才有效。我无法在同一屏幕上将数据从列表视图发送到detailsView。

也许我正在以不同的方式看待它，或者只是无法正确搜索。

如果有人能指出我正确的方向，将不胜感激。

如果以前已经回答过这个问题，那么我对此表示歉意-请确实将其标记为重复，并指出正确的讨论内容。

谢谢。

保持安全！

Answer 1

我建议您使用提供商状态管理，这将很容易实现，您的两个视图都将具有一些ChangeNotifier，以下是一些摘要，可能会帮助您：

populatelistview：

GestureDetector(
  onTap: (){
       notifier.setId(id);
    },
child:// your child

detailsView：

Container(
   child: Text(notifier.id),
)

更改通知程序

class Notifier extends ChangeNotifier {

int id;

void setId(int id){
  this.id = id;
  notifyListeners();// Here the magic happens
}

Answer 2

您可以传递这样的信息。在您的班级中使用变量来存储单击项的信息。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _item;

  @override
  void initState() {
    super.initState();
    _item = null;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text('Item $i'),
                    onTap: () => setState(() => _item = i),
                  );
                }),
          ),
          Container(height: 2, color: Colors.grey),
          Expanded(
            child: Container(
              color: Colors.grey[100],
              child: Center(
                child: Text(_item == null
                    ? 'Select an item'
                    : 'Item $_item was selected',),
              ),
            ),
          ),
        ]);
  }
}

希望这会有所帮助！

Answer 3

如果这是stateful小部件，请尝试使用setState()

请参见下面的示例代码：

class Test extends State<StatusPage> {
String text = 'Hello';

  @override
  Widget build(BuildContext context) {

    Widget details = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(text),
      ],
    );

    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            ListView.builder(
              itemCount: 4,
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item #$index'),
                  onTap: () {
                    setState(() {
                      text == 'Hello' ? text = 'Test' : text = 'Hello';
                    });
                  },
                );
              },
            ),
            SizedBox(height: 54),
            details,
          ],
        ), // Column
      ),
    );
  }


}

Answer 4

感谢所有尝试帮助我的人。但是，我现在已经通过使用继承的小部件解决了这个问题。

继承的窗口小部件更适合我需要数据从一个窗口小部件流到另一个窗口小部件而无需更改屏幕的情况。

Flutter-在同一屏幕上的小部件之间传递数据

4 个答案: