Я хочу создать программу, в которой 2 варианта будут написаны в тексте, и я хочу сделать свою программу всякий раз, когда пользователь выбирает один из этих вариантов, другой вариант будет выделен серым цветом.
Я пробовал использовать текстовую кнопку, но на мой вкус это все еще немного странно.
Попробуй это:
class _MyHomePageState extends State<MyHomePage> {
int _selectIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
children: [
InkWell(
onTap: () {
setState(() {
_selectIndex = 0;
});
},
child: Text(
'Celcius',
style: TextStyle(
color: _selectIndex == 0 ? Colors.black : Colors.grey,
),
),
),
const Text(' | '),
InkWell(
onTap: () {
setState(() {
_selectIndex = 1;
});
},
child: Text(
'Fashrenheit',
style: TextStyle(
color: _selectIndex == 1 ? Colors.black : Colors.grey,
),
),
),
],
),
),
);
}
}
Вы можете использовать виджет с состоянием для изменения состояния при нажатии кнопки.
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
enum Temperature { celcius, fahrenheit }
class _HomePageState extends State<HomePage> {
late Temperature _currentScale;
late num _currentTemp;
@override
void initState() {
super.initState();
_currentScale = Temperature.celcius;
_currentTemp = 24; //multiply by 1.8 add 32 C->F
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_currentScale == Temperature.celcius
? '$_currentTemp°C'
: '${_currentTemp * 1.8 + 32}°F',
style: Theme.of(context).textTheme.headline2,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
child: Text(
'Celcius',
style: TextStyle(
color: _currentScale == Temperature.celcius
? Colors.red
: Colors.grey),
),
onPressed: () =>
setState(() => _currentScale = Temperature.celcius)),
const SizedBox(
width: 10,
),
TextButton(
child: Text('Fahrenheit',
style: TextStyle(
color: _currentScale == Temperature.fahrenheit
? Colors.red
: Colors.grey)),
onPressed: () => setState(
() => _currentScale = Temperature.fahrenheit))
],
)
],
),
),
),
);
}
}
Вы можете попробовать ToggleButton вместо TextButton
Вы можете попробовать этот. Я надеюсь, что это полезно для вас!
class MyHomePage extends StatelessWidget {
final RxInt _selectIndex = 0.obs;
MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Obx(
() => Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"25",
style: TextStyle(
fontSize: 30,
color: _selectIndex.value == 0 ? Colors.grey : Colors.black,
),
),
const SizedBox(
height: 10,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
_selectIndex.value = 0;
},
child: Text(
'Celcius',
style: TextStyle(
color: _selectIndex.value == 0 ? Colors.black : Colors.grey,
),
),
),
const Text(' | '),
InkWell(
onTap: () {
_selectIndex.value = 1;
},
child: Text(
'Fashrenheit',
style: TextStyle(
color: _selectIndex.value == 1 ? Colors.black : Colors.grey,
),
),
),
],
),
],
),
),
),
);
}
}