如何将值从SearchBar传递到Flutter中的上一个屏幕

佛罗伦萨·卢帕斯库(Florentin Lupascu)

我有一个屏幕,那里有一个TextFormField当我单击此按钮时,TextFormField我将打开一个SearchBar项目。可以通过某种方式将从中选择的值传递SearchBar到上一个屏幕?我希望在单击某个项目以关闭SearchBar并在上一个屏幕上显示该项目的名称时(如果有MyHomePage)。这是我的进度,但我不知道如何向后传递值:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search Bar Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  String _vehicleReg = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
      body: buildUI(context),
    );
  }

  Widget buildAppBar() {
    return AppBar(title: Text('Search Reg Number'));
  }

  Widget buildUI(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        _buildVehicleRegTxtField(context),
        SizedBox(height: 200),
        selectedVehicle(),
      ],
    );
  }

  Widget selectedVehicle() {
    return Container(
      child: Text(
        'Selected vehicle will be displayed here.',
      ),
    );
  }

  Widget _buildVehicleRegTxtField(BuildContext context) {
    return TextFormField(
      onSaved: (val) {
        _vehicleReg = val;
      },
      readOnly: true,
      onTap: () {
        showSearch(context: context, delegate: PlateItemsSearch());
      },
      style: TextStyle(
        color: Colors.blue,
        fontFamily: 'OpenSans',
        fontSize: 24,
      ),
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'Click for Vehicles',
      ),
    );
  }
}

class PlateItemsSearch extends SearchDelegate<PlateNumber> {
  String selectedPlateNumber = "";

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

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {
    return Center(
      child: Text(
        selectedPlateNumber,
        style: TextStyle(fontSize: 20),
      ),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final myPlatesList = query.isEmpty
        ? loadPlateNumbers()
        : loadPlateNumbers().where((plate) {
            return plate.regNumber.contains(query);
          }).toList();
    return myPlatesList.isEmpty
        ? Text(
            'Plate Not Found',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
          )
        : ListView.builder(
            itemCount: myPlatesList.length,
            itemBuilder: (context, index) {
              final PlateNumber plateNumber = myPlatesList[index];
              return ListTile(
                leading: Icon(Icons.directions_car),
                onTap: () {
                  showResults(context);
                  selectedPlateNumber = plateNumber.regNumber;
                },
                title: RichText(
                  text: TextSpan(
                    text: plateNumber.regNumber.substring(0, query.length),
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.black,
                        fontWeight: FontWeight.bold),
                    children: [
                      TextSpan(
                        text: plateNumber.regNumber.substring(query.length),
                        style: TextStyle(fontSize: 20, color: Colors.grey),
                      )
                    ],
                  ),
                ),
              );
            },
          );
  }
}

class PlateNumber {
  final int id;
  final String regNumber;

  PlateNumber({this.id, this.regNumber});
}

List<PlateNumber> loadPlateNumbers() {
  var pn = <PlateNumber>[
    PlateNumber(id: 1, regNumber: 'DE99ABC'),
    PlateNumber(id: 2, regNumber: 'AB22SDK'),
    PlateNumber(id: 3, regNumber: 'KS88ASD'),
    PlateNumber(id: 4, regNumber: 'NV37SSD'),
    PlateNumber(id: 5, regNumber: 'PT20KLK'),
    PlateNumber(id: 6, regNumber: 'TEST123'),
    PlateNumber(id: 7, regNumber: 'VT20QWE'),
    PlateNumber(id: 13, regNumber: 'JS23POP'),
    PlateNumber(id: 14, regNumber: 'XX12WWW'),
    PlateNumber(id: 15, regNumber: 'AB01RCA')
  ];
  return pn;
}

感谢您阅读本文!

从搜索页面选择项目后,我将“ MyHomePage”小部件从“无状态”更改为“有状态”以刷新页面。
并在选择ListTile的项目时添加,调用“关闭”并返回值。

close(context, plateNumber);

这是您想要的完整代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search Bar Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  String _vehicleReg = "";
  PlateNumber selectedPlatItem;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
      body: buildUI(context),
    );
  }

  Widget buildAppBar() {
    return AppBar(title: Text('Search Reg Number'));
  }

  Widget buildUI(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        _buildVehicleRegTxtField(context),
        SizedBox(height: 200),
        selectedVehicle(),
      ],
    );
  }

  Widget selectedVehicle() {
    return Container(
      child: Text(
        selectedPlatItem == null
            ? 'Selected vehicle will be displayed here.'
            : selectedPlatItem.regNumber,
      ),
    );
  }

  Widget _buildVehicleRegTxtField(BuildContext context) {
    return TextFormField(
      onSaved: (val) {
        _vehicleReg = val;
      },
      initialValue: selectedPlatItem?.regNumber,
      readOnly: true,
      onTap: () async {
        selectedPlatItem =
            await showSearch(context: context, delegate: PlateItemsSearch());
        print(selectedPlatItem);
        setState(() {});
      },
      style: TextStyle(
        color: Colors.blue,
        fontFamily: 'OpenSans',
        fontSize: 24,
      ),
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'Click for Vehicles',
      ),
    );
  }
}

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

  @override
  Widget buildResults(BuildContext context) {
    return Container();
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final myPlatesList = query.isEmpty
        ? loadPlateNumbers()
        : loadPlateNumbers().where((plate) {
            return plate.regNumber.contains(query);
          }).toList();
    return myPlatesList.isEmpty
        ? Text(
            'Plate Not Found',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
          )
        : ListView.builder(
            itemCount: myPlatesList.length,
            itemBuilder: (context, index) {
              final PlateNumber plateNumber = myPlatesList[index];
              return ListTile(
                leading: Icon(Icons.directions_car),
                onTap: () {
                  showResults(context);
                  close(context, plateNumber);
                },
                title: RichText(
                  text: TextSpan(
                    text: plateNumber.regNumber.substring(0, query.length),
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.black,
                        fontWeight: FontWeight.bold),
                    children: [
                      TextSpan(
                        text: plateNumber.regNumber.substring(query.length),
                        style: TextStyle(fontSize: 20, color: Colors.grey),
                      )
                    ],
                  ),
                ),
              );
            },
          );
  }
}

class PlateNumber {
  final int id;
  final String regNumber;

  PlateNumber({this.id, this.regNumber});
}

List<PlateNumber> loadPlateNumbers() {
  var pn = <PlateNumber>[
    PlateNumber(id: 1, regNumber: 'DE99ABC'),
    PlateNumber(id: 2, regNumber: 'AB22SDK'),
    PlateNumber(id: 3, regNumber: 'KS88ASD'),
    PlateNumber(id: 4, regNumber: 'NV37SSD'),
    PlateNumber(id: 5, regNumber: 'PT20KLK'),
    PlateNumber(id: 6, regNumber: 'TEST123'),
    PlateNumber(id: 7, regNumber: 'VT20QWE'),
    PlateNumber(id: 13, regNumber: 'JS23POP'),
    PlateNumber(id: 14, regNumber: 'XX12WWW'),
    PlateNumber(id: 15, regNumber: 'AB01RCA')
  ];
  return pn;
}


  [1]: https://i.stack.imgur.com/EtsuA.gif

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Flutter:如何将图像文件传递到另一个屏幕

如何将变量的值返回到 Flutter 中的上一个类?

如何使用导航器将数据传递到Flutter中的上一个屏幕?(需要处理所有情况:滑动以返回,按下返回等)

如何将值传递给上一个ViewContoller

如何将CoreLocation值从一个VIewController传递到iOS中的AppDelegate?

如何将值从活动传递到Kotlin中的另一个活动

如何将 SwiftUI 中的静态值从一个视图传递到另一个视图?

如何将行中的当前列值与上一个值相加?

如何将Alt + Shift + h绑定到tmux中的上一个窗口?

将值传递到另一个屏幕

如何将参数传递到另一个选项卡导航屏幕

如何将数据从一个片段传递到上一个片段?

如何将值从一个功能文件中的表传递到另一功能文件的JSON请求?

如何将下拉列表中的值传递到烧瓶中的另一个页面

如何将值从弹出视图控制器传递到上一个视图控制器?

Flutter/Dart - 如何将单选按钮值传递给另一个文件中的不同类?

如何将值从Web表单传递到ASP.NET中的另一个表单?

单击按钮时如何将布尔值从片段传递到android中的另一个片段

如何将值从构造函数传递到JAVA另一个类中的setter?

如何将值从视图传递到MVC ASP .NET中的另一个控制器

如何将值从输入表单传递到laravel中的另一个页面

如何将单击的链接的值传递到另一个页面并在跨度中显示

如何将值从输入文本框传递到Laravel中的另一个页面

如何将文本框的值传递到asp.net(vb)中的另一个页面

SwiftUI 如何在关闭时将数据传递到上一个屏幕

如何将List <Map>的信息获取到Flutter中的另一个屏幕?

Rails:如何将值从一个动作传递到同一控制器中的另一个动作

如何将值从Ajax传递到另一个函数

如何将值从按钮传递到另一个类