如何根据 Flutter 中的条件导航到页面

Posted 2023-04-13

【中文标题】如何根据 Flutter 中的条件导航到页面

【英文标题】：How to navigate to page based on condition in Flutter

【发布时间】：2020-01-15 04:00:55

【问题描述】：

我想根据条件导航到页面。当我选择“许可证”并按 next 按钮时，它应该重定向到许可证页面。当我选择“未授权”并按 next 按钮时，它应该将我重定向到未授权页面。

从下拉列表中选择“许可”/“未许可”值后，它应该使用该值来确定要重定向到哪个页面。

这是我目前尝试过的一些代码：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

class BspSignupPage extends StatefulWidget          
  @override
  _BspSignupPageState createState() => _BspSignupPageState();


class _BspSignupPageState extends State<BspSignupPage> 
  bool bspcheck = false;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String _dropdownError;

  File _image;

  List<String> _colors = <String>[
    '',
    'Licensed / Register',
    'Unregistered',
  ];

  List<DropdownMenuItem<String>> _dropDownItem() 
    List<String> ddl = ["License/Registered", "UN-Registered"];
    return ddl
        .map((value) => DropdownMenuItem(
              value: value,
              child: Text(value),
            ))
        .toList();
  

  Widget _buildbusinesstype() 
    String _selectedGender;
    return new FormBuilder(
        autovalidate: true,
        child: FormBuilderCustomField(
          attribute: "Business Type",
          validators: [
            FormBuilderValidators.required(),
          ],
          formField: FormField(
            builder: (FormFieldState<dynamic> field) 
              return InputDecorator(
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.merge_type),
                    errorText: field.errorText),
                //isEmpty: _color == '',
                child: new DropdownButtonHideUnderline(
                  child: new DropdownButton(
                    value: _selectedGender,
                    items: _dropDownItem(),
                    onChanged: (value) 
                      _selectedGender = value;
                    ,
                    hint: Text('Select Business Type'),
                  ),
                ),
              );
            ,
          ),
        ));
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: AppBar(
        title: Text("BSP Signup"),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () 
            Navigator.pop(context);
          ,
        ),
        centerTitle: true,
      ),
      bottomNavigationBar: Container(
        color: Colors.transparent,
        height: 56,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new FlatButton.icon(
              icon: Icon(Icons.close),
              label: Text('Clear'),
              //  color: Colors.redAccent,
              textColor: Colors.black,
              // padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(7),
              ),
              onPressed: () ,
            ),
            new FlatButton.icon(
                icon: Icon(Icons.ac_unit),
                label: Text('Next'),
                color: Colors.amber,
                textColor: Colors.white,
                //padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),

                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(7),
                ),
                onPressed: () async 
                  if (_formKey.currentState.validate()) 
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => BspSignupPage()));
                  
                ),
          ],
        ),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Form(
          autovalidate: true,
          key: _formKey,
          child: Stack(
            children: <Widget>[
              SingleChildScrollView(
                padding: const EdgeInsets.all(30.0),
                child: new Container(
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildbusinesstype(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  

【问题讨论】：

你为什么不使用 if-else 语句呢？

感谢您的回答，但如何获得下拉值。获得下拉值后，我们可以在 flatbottom onpressed 事件中使用 if else 进行比较

【参考方案1】：

您可以使用状态变量获取下拉菜单的值，

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
class BspSignupPage extends StatefulWidget 


  @override
  _BspSignupPageState createState() => _BspSignupPageState();


class _BspSignupPageState extends State<BspSignupPage> 
  bool bspcheck = false;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String _dropdownError;

  String _dropDownValue = '';

  File _image;

  List<String> _colors = <String>[
    '',
    'Licensed / Register',
    'Unregistered',
  ];

  List<DropdownMenuItem<String>> _dropDownItem() 
    List<String> ddl = ["License/Registered", "UN-Registered"];
    return ddl
        .map((value) => DropdownMenuItem(
              value: value,
              child: Text(value),
            ))
        .toList();
  

  Widget _buildbusinesstype() 
    String _selectedGender;
    return new FormBuilder(
        autovalidate: true,
        child: FormBuilderCustomField(
          attribute: "Business Type",
          validators: [
            FormBuilderValidators.required(),
          ],
          formField: FormField(
            builder: (FormFieldState<dynamic> field) 
              return InputDecorator(
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.merge_type),
                    errorText: field.errorText),
                //isEmpty: _color == '',
                child: new DropdownButtonHideUnderline(
                  child: new DropdownButton(
                    value: _selectedGender,
                    items: _dropDownItem(),
                    onChanged: (value) 
                      _dropDownValue = value;
                    ,
                    hint: Text('Select Business Type'),
                  ),
                ),
              );
            ,
          ),
        ));
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: AppBar(
        title: Text("BSP Signup"),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () 
            Navigator.pop(context);
          ,
        ),
        centerTitle: true,
      ),
      bottomNavigationBar: Container(
        color: Colors.transparent,
        height: 56,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new FlatButton.icon(
              icon: Icon(Icons.close),
              label: Text('Clear'),
              //  color: Colors.redAccent,
              textColor: Colors.black,
              // padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(7),
              ),
              onPressed: () ,
            ),
            new FlatButton.icon(
                icon: Icon(Icons.ac_unit),
                label: Text('Next'),
                color: Colors.amber,
                textColor: Colors.white,
                //padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),

                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(7),
                ),
                onPressed: () async 
                  if (_formKey.currentState.validate()) 
                    // Now use if statement here to decide which route you want to go
                   if(_dropdDown == "SOME_VALUE")
                    // Go to this route
                    
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => BspSignupPage()));
                  
                ),
          ],
        ),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Form(
          autovalidate: true,
          key: _formKey,
          child: Stack(
            children: <Widget>[
              SingleChildScrollView(
                padding: const EdgeInsets.all(30.0),
                child: new Container(
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildbusinesstype(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  

【参考方案2】：

很遗憾，我目前无法访问 Flutter 来实际测试代码，但想法如下。

保留一个状态变量，用于跟踪应用应显示哪种类型的页面。例如，bool license = false。如果许可证是true，导航到一页。如果false，其他。您可以对下拉列表进行编码以更改该变量。

一旦用户选择了一个或另一个值，使用它导航到基于它的页面。在伪代码中：

FlatButton(
    ...<styling>...
    onPressed: () 
        if (_formKey.currentState.validate()) 
            if (license) 
                Navigator.push(
                    context, 
                    MaterialPageRoute(builder: (context) => LicensePage()),
                );
             else 
                Navigator.push(
                    context, 
                    MaterialPageRoute(builder: (context) => UnlicensedPage()),
                );
            
        
    
)

【讨论】：

感谢您的宝贵回答，感谢您的回答。