Flutter List、详情页和待办事项

Question

我有一个带有列表的页面和一个到达详细信息页面的栏。 我想在详细信息页面上添加一个弹出窗口以检索项目并将其保存到待办事项页面，但我的详细信息页面有问题。

使用无状态，我不用担心，但是，如果我没记错的话，我需要有状态来添加 Future，showDialog .. 但是，我的索引有问题...在那里，我迷路了...

谁能给我一个跟踪或解释？

谢谢

home.dart

import 'dart:core';
import 'package:flutter/material.dart';
import 'package:test_todo_list/DataList.dart';
import 'package:test_todo_list/detail.dart';

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Liste Items'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: DataSearch(listWords));
              })
        ],
      ),
      body: ListView.separated(
        itemCount: listWords.length,
        separatorBuilder: (BuildContext context, int i) =>
            Divider(color: Colors.grey),
        itemBuilder: (context, i) {
          return ListTile(
            onTap: () {
              Navigator.push(
                context,MaterialPageRoute(
                builder: (context) => Detail(listWordsDetail: listWords[i]),
              ),
              );
            },
            title: RichText(
                textAlign:TextAlign.left,
                text: TextSpan(
                    children:<TextSpan>[
                      TextSpan(
                        text:listWords[i].titlelist,
                        style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.blueGrey)),
                      ),

                    ]
                )
            ),
            subtitle: Text(listWords[i].definitionlist,
              style: Theme.of(context).textTheme.subtitle.merge(
                  TextStyle(fontStyle: FontStyle.italic, color: Colors.grey)),
            ),
            trailing: Icon(Icons.arrow_forward_ios, color: Colors.grey),
          );
        },
      ),
    );
  }
}
class DataSearch extends SearchDelegate<String> {

  final List<ListWords> listWords;

  DataSearch(this.listWords);

  @override
  List<Widget> buildActions(BuildContext context) {
    //Actions for app bar
    return [IconButton(icon: Icon(Icons.clear), onPressed: () {
      query = '';
    })];
  }

  @override
  Widget buildLeading(BuildContext context) {
    //leading icon on the left of the app bar
    return IconButton(
        icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {
    // show some result based on the selection
    final suggestionList = listWords;

    return ListView.builder(itemBuilder: (context, index) => ListTile(

      title: Text(listWords[index].titlelist),
      subtitle: Text(listWords[index].definitionlist),
    ),
      itemCount: suggestionList.length,
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // show when someone searches for something

    final suggestionList = query.isEmpty
        ? listWords
        : listWords.where((p) => p.titlelist.contains(RegExp(query, caseSensitive: false))).toList();


    return ListView.builder(itemBuilder: (context, index) => ListTile(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Detail(listWordsDetail: suggestionList[index]),
          ),
        );
      },
      trailing: Icon(Icons.remove_red_eye),
      title: RichText(
        text: TextSpan(
            text: suggestionList[index].titlelist.substring(0, query.length),
            style: TextStyle(
                color: Colors.red, fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                  text: suggestionList[index].titlelist.substring(query.length),
                  style: TextStyle(color: Colors.grey)),
            ]),
      ),
    ),
      itemCount: suggestionList.length,
    );
  }
}

detail.dart

import 'package:flutter/material.dart';
import 'package:test_todo_list/DataList.dart';

class Detail extends StatefulWidget {

  Detail({Key key, @required this.listWordsDetail}) : super(key: key);
  final ListWords listWordsDetail;

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

  class _DetailState extends State<Detail> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          brightness: Brightness.dark,
          title: const Text('Détails', style: TextStyle(color: Colors.white)),
          iconTheme: IconThemeData(color: Colors.white),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(listWordsDetail.titlelist +' (on detail page)',
                style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.blueGrey)),
              ),
              Text(listWordsDetail.definitionlist,
                style: Theme.of(context).textTheme.subtitle.merge(
                  TextStyle(fontStyle: FontStyle.italic, color: Colors.grey)),
        ),
              Container(
                padding: EdgeInsets.all(40.0),
                child: GestureDetector(
                  onTap: () {

                  },
                  child: Icon(Icons.add_shopping_cart),
                ),

              )
            ],
          ),
        )
    );
  } 
}

DataList.dart

List<ListWords>  listWords = [
  ListWords('oneWord', 'OneWord definition'),
  ListWords('twoWord', 'TwoWord definition.'),
  ListWords('TreeWord', 'TreeWord definition'),
];

class ListWords {
  String titlelist;
  String definitionlist;

  ListWords(String titlelist, String definitionlist) {
    this.titlelist = titlelist;
    this.definitionlist = definitionlist;
  }
}

Answer 1

在网上搜索后，我偶然发现了这个我无法解释但有效的解决方案......

import 'package:flutter/material.dart';
import 'package:test_todo_list/DataList.dart';
import 'package:test_todo_list/todo_list.dart';

class Detail extends StatefulWidget {

  const Detail({Key key, this.listWordsDetail}) : super (key: key);
  final ListWords listWordsDetail;

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

class _DetailState extends State<Detail> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          brightness: Brightness.dark,
          title: const Text('Détails', style: TextStyle(color: Colors.white)),
          iconTheme: IconThemeData(color: Colors.white),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(widget.listWordsDetail.titlelist),
              Text(widget.listWordsDetail.definitionlist),
              Container(
                padding: EdgeInsets.all(40.0),
                child: GestureDetector(
                  onTap: () {
                    //open Dialog addTodoList()
                  },
                  child: Icon(Icons.add_shopping_cart),
                ),
              )
            ],
          ),
        )
    );
  }


  Future<Null> addTodoList() async {
    showDialog(context: context);
    //... à construire
  }
}