微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter 搜索委托全宽

如何解决Flutter 搜索委托全宽

我使用 Flutter 制作了一个主从类型视图应用程序,在 Flutter 桌面上运行。我在 appBar 上实现了 SearchDelegate,但它占用了应用的整个宽度。

这是一些屏幕截图。

enter image description here

搜索处于活动状态时

enter image description here

这是一些代码

main_page.dart

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context,constraints){
          if(!(constraints.maxWidth > 768)){
              return MasterTab();
          }
          return Row(
            children: [
              Container(
                width: constraints.maxWidth / 4,child: MasterTab(),),Expanded(
                child: DetailTab(),)
            ],);
        },);
  }
}

master_tab.dart(左侧,我希望搜索视图显示

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Primary"),actions: [
          IconButton(
              onpressed: () {
                showSearch(context: context,delegate: SearchView());
              },icon: Icon(Icons.search))
        ],body: ListView.builder(
        itemCount: _notes.length,itemBuilder: (context,index){
          return ItemNote(noteEntity: _notes[index]);
        },floatingActionButton: FloatingActionButton(
        onpressed: _onAddNoteClick,child: Icon(Icons.create),);
  }

detail_tab.dart(右侧,红色)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Align(
            alignment: Alignment.topRight,child: DetailAction(),Expanded(child: Container(
            color: Colors.red,))
        ],)
    );
  }

search_delegate.dart

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

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(onpressed: () {
      Navigator.pop(context);
    },icon: Icon(Icons.arrow_back));
  }

  @override
  Widget buildresults(BuildContext context) {
    return Container(
      color: Colors.Amber,child: Center(
        child: Text("Search query"),);
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Suggestion"),);
  }
  
}

我想让搜索视图只在左侧工作(不占全角),如何实现?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。