我希望 Expanded 小部件根據“按鈕 1”、“按鈕 2”或“按鈕 3”被按下而改變。按鈕只是包裝在 InkWell 中的文本,我可以更改它,但這只是為了了解如何使 Expanded 在按鈕按下時成為被告。
我已經閱讀了很多關于此的帖子,但我不清楚如何做到這一點。
如果有更好的方法可以做到這一點,請告訴我。
感謝您的幫助。
import 'package:flutter/material.dart';
double selectedScreen = 1;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget middleScreen() {
if (selectedScreen == 1) {
return FirstScreen();
} else if (selectedScreen == 2) {
return SecondScreen();
} else {
return ThirdScreen();
}
}
Container FirstScreen() {
return Container(child: Text('FirstScreen'));
}
Container SecondScreen() {
return Container(child: Text('SecondScreen'));
}
Container ThirdScreen() {
return Container(child: Text('ThirdScreen'));
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: () {
selectedScreen = 1;
},
child: Column(
children: [
Text(
'Buttonn 1',
),
],
),
),
InkWell(
onTap: () {
selectedScreen = 2;
},
child: Column(
children: [
Text(
'Button 2',
)
],
),
),
InkWell(
onTap: () {
selectedScreen = 3;
},
child: Column(
children: [
Text(
'Button 3',
)
],
),
),
],
),
Container(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Expanded(child: middleScreen())],
)
],
),
),
);
}
}
uj5u.com熱心網友回復:
簡單地說,由于它是一個有狀態的小部件,我們必須通知它的新狀態
你唯一需要的是setState
方法
只需selectedScreen = ...
用setState(() { ... });
示例可能如下所示
setState(() { selectedScreen = 1;});
你可以在這里試試
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/533038.html