有谁知道如何使用flutter来实现带有类似于instagram这样的选项卡的搜索栏? | 使用flutter来实现带有类似于instagram这样的选项卡

本文介绍了有谁知道如何使用flutter来实现带有类似于instagram这样的选项卡的搜索栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道如何构建一个搜索栏，在其中将用户搜索输入过滤到组或选项卡中，例如instagram，就像人物，标签，地点一样，但我不知道该怎么做！

I want to know how to build a search bar where it filters the users search input into groups or tabs such as people, tags, places just like what instagram has but I don't know how to do this!

推荐答案

它可能看起来像这样:

import 'package:flutter/material.dart';

main() => runApp(
      MaterialApp(
//          home: Scaffold(
//        body: Container(child: SearchButton()),
          home: Body()),
    );

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.search),
          title: TextField(
            controller: controller,
            cursorColor: Colors.white,
            style: TextStyle(color: Colors.white),
          ),
          bottom: TabBar(tabs: [
            Tab(icon: Icon(Icons.people)),
            Tab(icon: Icon(Icons.location_city)),
          ]),
        ),
        body: TabBarView(children: [Container(), Container()]),
      ),
    );
  }
}

想要的结果:

代码结果:

这篇关于有谁知道如何使用flutter来实现带有类似于instagram这样的选项卡的搜索栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！