如何在搜索结果页后添加特定的文字和图片？

Question

下面的代码是我到目前为止得到的。搜索功能有效，当点击“Google”时，您将进入一个特定于“Google”的新页面。

但我现在不确定如何向页面添加特定的文本和图像。例如，我不希望将 Facebook 信息放在 Google 页面上。做一个新的清单是明智的吗？还有哪些其他选择，我将如何去做？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Example"),
        actions: [
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: SearchItem());
              }),
        ],
      ),
    );
  }
}

final List<String> myList = [
  "google",
  "IOS",
  "Android",
  "Linux",
  "MacOS",
  "Windows"
];

class SearchItem extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            query = "";
          })
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: AnimatedIcon(
          icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {}

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionsList = query.isEmpty
        ? myList
        : myList
        .where((p) => p.toLowerCase().contains(query.toLowerCase()))
        .toList();

    return ListView.builder(
      itemBuilder: (context, index) => ListTile(
        onTap: () {
          close(context, suggestionsList[index]);
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => DetailScreen(myList
                      .indexWhere((item) => item == suggestionsList[index]))));
        },
        title: Text(suggestionsList[index]),
      ),
      itemCount: suggestionsList.length,
    );
  }
}

class DetailScreen extends StatelessWidget {
  final int index;

  DetailScreen(this.index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("${myList[index]}"),),
        body: Center(
          child: Text(
            "${myList[index]}",style: TextStyle(fontSize: 22),
          ),
        ));
  }
}

Answer 1

不确定你想说什么，但如果你想在 Details Page 上显示更多数量的 items，那么在这种情况下你可以创建一个 class 其中可以包含所有这些 items，您想在 details class.

中显示

这是有效的Code同样的，请检查

import 'package:flutter/material.dart';

//Below it the new Class you Will Need, or We can say a Modal You Need to have all your properties of the class,
//Which you wanna show in details page
class MyPlatforms {
  String name;
  String image;
  MyPlatforms({this.image, this.name});
}

//A MyPlatforms list created using that modal
final List<MyPlatforms> myPlatformsList = [
  MyPlatforms(image: "assets/images/google.png", name: "Google"),
  MyPlatforms(image: "assets/images/ios.png", name: "IOS"),
  MyPlatforms(image: "assets/images/linux.png", name: "Linux"),
  MyPlatforms(image: "assets/images/android.png", name: "Android"),
  MyPlatforms(image: "assets/images/mac.png", name: "MacOS"),
  MyPlatforms(image: "assets/images/windows.png", name: "Windows"),
];

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Example"),
        actions: [
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: SearchItem());
              }),
        ],
      ),
    );
  }
}

final List<String> myList = [
  "google",
  "IOS",
  "Android",
  "Linux",
  "MacOS",
  "Windows"
];

class SearchItem extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            query = "";
          })
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: AnimatedIcon(
          icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {}

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionsList = query.isEmpty
        ? myList
        : myList
            .where((p) => p.toLowerCase().contains(query.toLowerCase()))
            .toList();

    return ListView.builder(
      itemBuilder: (context, index) => ListTile(
        onTap: () {
          close(context, suggestionsList[index]);
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => DetailScreen(
                        item: myPlatformsList[
                            index], //pass the index of the MyPlatforms list
                      )));
        },
        title: Text(suggestionsList[index]),
      ),
      itemCount: suggestionsList.length,
    );
  }
}

class DetailScreen extends StatelessWidget {
  final MyPlatforms
      item; //Get the item, as a object of MyPlatforms class so the we can acess its all properties like image and name;

  DetailScreen({this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("${item.name}"),
        ),
        body: Center(
          child: new Column(
            children: [
              Text(
                "${item.name}", //acessing the name property of the  MyPlatforms class
                style: TextStyle(fontSize: 22),
              ),
              SizedBox(
                height: 20.0,
              ),
              Image.asset(
                  "${item.image}"), //acessing the image property of the  MyPlatforms class
            ],
          ),
        ));
  }
}

如何在搜索结果页后添加特定的文字和图片？

How to add specific text and images after the search result page?

navigation

search

search-path

dart

flutter