【问题标题】:Flutter widget rebuilding when TextField widget tapped or release当 TextField 小部件点击或释放时 Flutter 小部件重建
【发布时间】:2020-06-23 01:04:47
【问题描述】:

当我点击 textField 时,我遇到了小部件重建的问题。 以及释放键盘时

我检查了this answer,但它不起作用。

这是小部件

class ListSearch extends StatefulWidget {
  @override
  _ListSearchState createState() _ListSearchState();
}

class _ListSearchState extends State<ListSearch> {
   @override
  Widget build(BuildContext context) { print('rebuild....'); 
    return MaterialApp(
        theme: ThemeData(fontFamily: "Lato"),
        home: Scaffold(
          appBar: AppBarBuilder.getAppBar(context, "Listings", null),
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                TextField(
                maxLines: 1,
                textInputAction: TextInputAction.search,
                onChanged: (val) {applyFilter(val); },
                cursorColor: Colors.blue,
                controller: searchController,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 16.0,
                ),
                decoration: InputDecoration(
                  focusedBorder: InputBorder.none,
                  border: InputBorder.none,
                  alignLabelWithHint: false,
                  hintText: "Search",
                ),
              ),
                Container(height: 600.0, child: buildLists()),
              ],
            ),
          ),
        ),
    );
  }
}

有什么解决办法吗?

更新

当我导航到这个页面时,它会生成两次

Navigator.of(context).push(MaterialPageRoute(builder: (context) => ListSearch()));

【问题讨论】:

  • 我认为您应该使用 TextEditController 的控制器而不是 onChanged:只需将 controller.text 传递给 applyFilter(controller.text) 。
  • @ShrutiRamnandanSharma onchange 不会在点击时调用

标签: flutter flutter-layout


【解决方案1】:

检查您的代码在热重载之前不会再次重建小部件 applyFilter 方法如果您使用的是setstate,它将重新加载小部件

import 'package:flutter/material.dart';

class ListSearch extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ListSearchState();
  }
}

class ListSearchState extends State<ListSearch> {

  TextEditingController _searchController = TextEditingController();
  @override
  Widget build(BuildContext context) {
   print('rebuild....');
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(fontFamily: "Lato"),
    home: Scaffold(
      appBar: AppBar(
        title: Text("Listing"),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[

           TextField(
                maxLines: 1,
                textInputAction: TextInputAction.search,
                onChanged: (val) {
                  //applyFilter(val);
                },
                cursorColor: Colors.blue,
                controller: _searchController,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 16.0,
                ),
                decoration: InputDecoration(
                  focusedBorder: InputBorder.none,
                  border: InputBorder.none,
                  alignLabelWithHint: false,
                  hintText: "Search",
                ),
              ),

            Container(height: 600.0, child: Text("Define you list widget")
           // buildLists()
            ),
          ],
        ),
      ),
    ),
  );
  }
}

【讨论】:

  • applyFilter 仅在 TextField 发生更改时调用
  • 是的,它的真实 applyFilter 将适用于更改的值,我使用了相同的代码并检查了您的打印消息,当点击 textfield 时,重建不会出现
  • 它看起来像导航到页面时构建了两次Navigator.of(context).push(MaterialPageRoute(builder: (context) =&gt; ListSearch()));
猜你喜欢
  • 2019-08-23
  • 1970-01-01
  • 2021-12-01
  • 1970-01-01
  • 2022-01-21
  • 2020-11-07
  • 2020-07-25
  • 2020-02-24
  • 1970-01-01
相关资源
最近更新 更多