Flutter TeX всегда перестраивается при поиске - PullRequest
2 голосов
/ 19 октября 2019

Я создаю приложение, у которого есть список уравнений, который находится внутри столбца, который находится внутри SingleChildScrollView. Я отображаю уравнения, используя пакет под названием flutter_tex , который использует mathjax для визуализации уравнений. Теперь мне нужно, чтобы пользователи могли искать уравнения, но когда пользователь что-то вводит в строку поиска, TeXView перерисовывается (требуется много времени), что является большой проблемой, потому что мне нужно, чтобы это было быстро. Кроме того, я использую модели с определенными областями. home_view.dart

class HomeView extends StatelessWidget {
  final TextEditingController _searchTextController =
      new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return ScopedModel<HomeModel>(
      model: locator<HomeModel>(),
      child: SafeArea(
        child: Scaffold(
          appBar: _buildAppBar(),
          backgroundColor: BG_COLOR,
          body: _buildScrollView(context),
        ),
      ),
    );
  }

  List<EquationCard> _getEquations(
      BuildContext context, List<EquationCard> equations) {
    List<EquationCard> newEqs = [];

    for (EquationCard equation in equations) {
      newEqs.add(EquationCard(
          title: AppLocalizations.of(context).translate(equation.title),
          teX: equation.teX,
          height: equation.height,
          favorite: equation.favorite));
    }

    return newEqs;
  }

  Widget _buildAppBar() {
    return AppBar(
      backgroundColor: BG_COLOR,
      elevation: 0.0,
      title: ScopedModelDescendant<HomeModel>(
        builder: (context, child, model) {
          return model.isSearching ? _buildSearchTextField(model) : Container();
        },
      ),
      leading: ScopedModelDescendant<HomeModel>(
        builder: (context, child, model) {
          return model.isSearching
              ? IconButton(
                  icon: Icon(Icons.arrow_back, size: 30.0),
                  onPressed: () {
                    _searchTextController.clear();
                    model.setIsSearching(false);
                  },
                )
              : Padding(
                  padding: EdgeInsets.only(left: 18.0),
                  child: IconButton(
                    icon: Icon(CustomIcons.menu, size: 30.0),
                    onPressed: () {},
                  ),
                );
        },
      ),
      actions: <Widget>[
        ScopedModelDescendant<HomeModel>(
          builder: (context, child, model) {
            return IconButton(
              icon: Icon(model.isSearching ? Icons.close : Icons.search,
                  size: 30.0),
              onPressed: () {
                if (!model.isSearching) {
                  model.setIsSearching(true);
                } else {
                  _searchTextController.clear();
                }
              },
            );
          },
        ),
      ],
    );
  }

  Widget _buildSearchTextField(HomeModel model) {
    return TextField(
      controller: _searchTextController,
      autofocus: true,
      onChanged: (txt) {
        model.setSearchText(txt);
      },
      style: TextStyle(
        color: Colors.white,
        fontSize: 18.0,
      ),
      decoration: InputDecoration(
        hintText: "Search..",
        hintStyle: TextStyle(color: Colors.white, fontSize: 18.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
      ),
    );
  }

  Widget _buildScrollView(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0),
            child: Column(
              children: <Widget>[
                ScopedModelDescendant<HomeModel>(
                  builder: (context, child, model) {
                    return EquationCategory(
                        AppLocalizations.of(context).translate("physics_title"),
                        _getEquations(context, PhysicsEquations.equations),
                        model.searchText);
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

уравнение_карты.дарт

@override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.only(bottom: 15.0),
      elevation: 5.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
      color: BG_COLOR,
      child: Padding(
        padding: EdgeInsets.only(left: 15.0, right: 5.0, top: 8.0, bottom: 8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  this.title,
                  style: TextStyle(
                      fontSize: 24.0,
                      color: Colors.white,
                      fontFamily: "SF-Pro-Text-Bold"),
                ),
                LikeButton(),
              ],
            ),
            Container(
              height: this.height,
              child: GestureDetector(
                onVerticalDragUpdate: (_) {},
                child: TeXView(
                  teXHTML: r"""
                          <style>
                            * {
                              -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
                              -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
                              outline: none !important;
                            }

                            body {
                              background-color: """ +
                      BG_COLOR_HEX +
                      r""";
                            }

                            p {
                              color: white;
                              font-size: 22px;
                            }

                            .MathJax_SVG_Display {
                              text-align: left !important;
                              margin: 0 !important;
                            }
                          </style>
                          <p>
                          """ +
                      this.teX +
                      r"""
                    </p>
                    """,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Буду очень благодарен, если вы сможете помочь.

...