Функция setState не обновляет текст в списке, хотя переменная не объявлена в методе сборки.
Я пытаюсь изменить текст на первой и второй вкладке нижней панели навигации.
Вот код:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
int _volume = 0;
void changeVolume(){
_volume += 1;
}
late final List<Widget> _widgetOptions = <Widget>[
Row(
children: <Widget>[
IconButton(
icon: const Icon(Icons.volume_up),
tooltip: 'Increase volume by 1',
onPressed: (){
setState(() {
changeVolume();
});
},
),
Expanded(
child: Text('Volume : $_volume'),
),
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
),
Text('Volume : $_volume'),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
В большинстве случаев эта проблема возникает на этом сайте из-за того, что кто-то объявил переменную в методе сборки, но я не делаю этого здесь, поэтому я не уверен, почему текст не обновляется.
Потому что иначе setState() не будет работать. Список создается раньше всего, поэтому setState запутывается. Late заставляет его составлять список во время выполнения.
setState
перезапустит метод build
, поэтому, если вы объявите _widgetOptions
вне метода build
, его содержимое не изменится. setState
на _selectedIndex
будет работать, потому что он просто выбирает один элемент в _widgetOptions
.
Поэтому удалите late final
и переместите объявление _widgetOptions
в метод сборки:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
int _volume = 0;
void changeVolume() {
_volume += 1;
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
List<Widget> _widgetOptions = <Widget>[
Row(
children: <Widget>[
IconButton(
icon: const Icon(Icons.volume_up),
tooltip: 'Increase volume by 1',
onPressed: () {
setState(() {
changeVolume();
});
},
),
Expanded(
child: Text('Volume : $_volume'),
),
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
),
Text('Volume : $_volume'),
Text(
'Index 2: School',
style: optionStyle,
),
];
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
Конечно, вы можете оптимизировать его, но приведенный выше код работает в DartPad, как и ожидалось.
(Кстати, late
отмечает переменную-член, которой не присвоено значение при объявлении, но вы убедитесь, что она будет иметь значение до того, как какая-либо часть вашего кода получит к ней доступ. Так что на самом деле она не имеет реального значения, когда вы назначаете ненулевое значение переменной.)
Почему список установлен как
late
?