当着重于TextField

时间:2019-11-27 15:24:29

标签: flutter dart

我的项目由Blocs和Statefull小部件构成。到现在为止一切正常。每当我关注Textfield时,它都会重建整个链,这意味着它背后的所有路线。 我的意思是,当路由被推送时,一个路由不能访问其他路由的上下文,对吗?

MaterialApp
   -> Home(context)

//pushed a route

MaterialApp
  -> NewPage(context) //it's doesn't interfere with Home
  -> Home(context)

那么重建一切的方式又如何呢?只是这种特定的小部件重建会导致问题,反之,其他一切都很好。

发生的事情的概述:

  1. CheckoutPage从购物车页面推入堆栈中

  2. 用户选择添加新位置

  3. 选择文本字段

  4. 所有先前的路线都已重建

代码: 这是我的路线的定义方式

routes: {
...
'/checkout': (context) => BlocProvider(
      bloc: CheckoutBloc(),
      child: BlocProvider( //statefull widget
        bloc: LocationBloc(),
        child: CheckoutPage(),
      ),
    ),
'/locations/new': (context) => BlocProvider(
          bloc: NewLocationBloc(),
          child: NewLocationModal(),
        )
...
}

所有小部件均为Statefull。 结帐页面包含小部件列表。

class _CheckoutPageState extends State < CheckoutPage > {
  final Key _scaffold = GlobalKey < ScaffoldState > ();
  //Pages
  //1. Cart Summary
  //2. Address
  //3. Appoint Schdule
  //4. Payment
  //5  Confirmation
  int initialData = 0;
  List < Widget > _pages = [
    CartSummary(),
    LocationPage(),
    AppointmentSchedule(),
    Payment(),
    Confirmation()
  ];
  List < String > _pageTitle = [
    'Cart Summary',
    'Address',
    'Schedule Appointment',
    'Payment',
    'Confirmation'
  ];
  final PageController controller = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    final CheckoutBloc bloc = BlocProvider.of < CheckoutBloc > (context);
    return BlocProvider(
      bloc: cartBloc,
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        key: _scaffold,
        body: PageView(
          key: PageStorageKey('checkout'),
          onPageChanged: (int index) {
            bloc.changePage(index);
          },
          controller: controller,
          children: _pages,
        ),
      ),
      // ),
    );
  }
}

现在,当我推入一条名为/ unamed的新路由并单击任何TextField时,它将重建堆栈中的先前路由,并且重新实例化了Bloc。

class _NewLocationModalState extends State < NewLocationModal > {
  static final _scaffoldKey = GlobalKey < ScaffoldState > ();
  static final _form = GlobalKey < FormState > ();
  final TextEditingController _name = TextEditingController();
  @override
  Widget build(BuildContext context) {
    final NewLocationBloc bloc = BlocProvider.of < NewLocationBloc > (context);
    return Scaffold(
      key: _scaffoldKey,
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        leading: IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            Navigator.pop(context, null);
          },
        ),
        title: Text('New address'),
      ),
      body: SingleChildScrollView(
        child: Form(
          key: _form,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 18),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: < Widget > [
                  Container(
                    color: Colors.lightGreenAccent,
                    height: 300,
                    child: Center(
                      child: Text('TODO// ADD Gmaps'),
                    ),
                  ),
                  TextFormField(
                    // autofocus: true,
                    decoration: InputDecoration(hintText: 'Client Name'),
                    controller: _name,
                    validator: (val) {
                      if (val.length <= 0) return "Can't be left blank";
                      return null;
                    },
                  ),
                ],
              ),
          ),
        ),
      ),
    );
  }
}

这也是重建先前路线的预期行为吗?

我如何构建项目以解决此问题?

有一个已关闭的GitHub问题,但没有任何帮助。 https://github.com/flutter/flutter/issues/37878

0 个答案:

没有答案