Я создаю приложение, у которого есть список уравнений, который находится внутри столбца, который находится внутри 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>
""",
),
),
),
],
),
),
);
}
Буду очень благодарен, если вы сможете помочь.