如何將 3 個小部件合二為一？

Question

我正在嘗試顯示 3 個具有 3 個不同的點擊功能的小部件，但它不起作用。 所以我想要的是整個小部件分成 3 個不同的小部件，所以我可以調用小部件 1 小部件 2 或小部件 3。但這不起作用，我不知道究竟是為什么。 我有這個視頻集合，其中用戶視頻上傳了 3 個主題標簽，我想要的是用戶可以搜索一個主題標簽，無論哪個主題標簽，但它總是顯示所有 3 個主題標簽，而不是用戶搜索的那個。 這就是我對 3 個不同的小部件的意思。

這是我的代碼：

class Openalldocs extends StatefulWidget {
  final TextEditingController searchinginput;
  static const route = '/openalldocs';

  const Openalldocs({Key key, this.searchinginput}) : super(key: key);

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

class _OpenalldocsState extends State<Openalldocs> {
  List _allResults = [];
  List _resultsList = [];
  Future resultsLoaded;
  bool nosuerfound = false;
  String searchresult;

  @override
  void initState() {
    super.initState();
    widget.searchinginput.addListener(_onsearchChanged);
    setState(() {
      nosuerfound = true;
    });
  }

  @override
  void dispose() {
    widget.searchinginput.removeListener(_onsearchChanged());

    super.dispose();
  }

  @override
  void didChangeDependencies() {
    widget.searchinginput.text;
    resultsLoaded = getusers();
    super.didChangeDependencies();
  }

  _onsearchChanged() {
    setState(() {
      nosuerfound = false;
    });
    searchResults();
  }

  searchResults() {
    var showResults = [];
    if (widget.searchinginput.text != "") {
      for (var tripsnapshot in _allResults) {
        var title = DatbaseService.instance
            .videosfromsnapshot(tripsnapshot)
            .hashtag1
            .toLowerCase();
        print(title);
        var title2 = DatbaseService.instance
            .videosfromsnapshot(tripsnapshot)
            .hashtag3
            .toLowerCase();
        print(title);
        var title3 = DatbaseService.instance
            .videosfromsnapshot(tripsnapshot)
            .hashtag2
            .toLowerCase();
        print(title);
        if (title.contains(widget.searchinginput.text.toLowerCase()) ||
            title2.contains(widget.searchinginput.text.toLowerCase()) ||
            title3.contains(widget.searchinginput.text.toLowerCase())) {
          setState(() {
            nosuerfound = true;
          });
          showResults.add(tripsnapshot);
        }
      }
    } else {
      setState(() {
        nosuerfound = true;
      });
      showResults = List.from(_allResults);
    }
    setState(() {
      _resultsList = showResults;
    });
  }

  getusers() async {
    var firestore = FirebaseFirestore.instance;
    QuerySnapshot qn = await firestore.collection('videos').get();
    if (!mounted) return;

    setState(() {
      _allResults = qn.docs;
    });
    searchResults();
    return "Complete";
  }

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<Userforid>(context);
    if (nosuerfound == true) {
      return ListView.builder(
        itemCount: _resultsList.length,
        itemBuilder: (BuildContext context, int index) {
          return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                InkWell(
                  onTap: () {
                  },
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: [
                          HighlightedMatchesText(
                            searchString: widget.searchinginput.text,
                            content: _resultsList[index].data()['hashtag1'],
                          ),
                        ],
                      ),
                      SizedBox(height: 3),
                    ],
                  ),
                ),
                SizedBox(height: 6),
                InkWell(
                  onTap: () {
                  },
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: [
                          HighlightedMatchesText(
                            searchString: widget.searchinginput.text,
                            content: _resultsList[index].data()['hashtag2'],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 6),
                InkWell(
                  onTap: () {
                
                  },
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: [
                          HighlightedMatchesText(
                            searchString: widget.searchinginput.text,
                            content: _resultsList[index].data()['hashtag3'],
                          ),
                        ],
                      ),
                      SizedBox(height: 3),
                    ],
                  ),
                ),
                SizedBox(height: 6),
              ]);
        },
      );
    } else {
      return Padding(
        padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
        child: Center(
          child: Container(
              child: Text(
            "No Hashtag found",
            style: TextStyle(fontSize: 16),
          )),
        ),
      );
    }
  }
}

Answer 1

您的onTap處理程序是空的，因此在點擊時實際上不會發生任何事情。

為了實現您的目標，最好不要在 Column 子項中一個一個地創建小部件，而是創建一個 for 循環，並制作 onTap 和與之相關的所有內容。

以下是如何實現它（我只取了代碼的一小部分，即Column部分）：

return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // the AMOUNT is how many hashtags you want to show
    for (var i = 0; i < AMOUNT; i += 1) ...[
      // the SizedBox will only exist between the elements in the list
      // as before
      if (i != 0) SizedBox(height: 6),
      // create a builder to allow declaring a variable 
      Builder(
        builder: (context) {
          // declare the hashtag variable
          final hashtag = 'hashtag$i';

          return InkWell(
            onTap: () {
              // do something with the hashtag stored in the variable
              // this will make it relative to the element in the list
            },
            child: Column(
              children: <Widget>[
                // why is there a Column inside another with only one child?
                // I would recommend to remove it
                Column(
                  children: [
                    HighlightedMatchesText(
                      searchString: widget.searchinginput.text,
                      // notice how I am using the hashtag variable here
                      // instead of a constant? ('hashtag1'), by the way
                      // the for loop will make the hashtag start at 0
                      // you can change it by increment in the declaration
                      // `final hashtag = 'hashtag${i+1}'`, if you want
                      // the existing behavior
                      content: _resultsList[index].data()[hashtag],
                    ),
                  ],
                ),
                // what is this? if it is to add more space between the items
                // in the list, I recommend removing it from here, and add it
                // to the first `SizedBox` in the for loop
                // in case you do that, the Column that this widget belong
                // would also only now contain one widget, so, there is no
                // need to have it
                SizedBox(height: 3),
              ],
            ),
          ),
        },
      );
    ],
  ],
);

我添加了很多評論，我希望它們能幫助你實現你想要的。