我创建了一个应用程序,其中包含大量更新字符串值的按钮。
在中间有一个容器需要为所选择的每个按钮显示不同的窗口小部件。并且当按下新按钮时,中间容器将需要弹出旧的显示小部件,并在其位置上构建一个新的。我曾想过将中间容器与所有小部件分层,以显示和使用连接到字符串值的可见性小部件,使用if语句显示/隐藏它们,但我没有这样做。I don“我不认为这是最好的办法。
我整理了下面的示例代码
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
@override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
String displayText = 'Choose option';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Expanded(
child: Column(
children: [
SizedBox(
height: 50,
),
Button(
text: 'option A',
onTap: () {
displayText = 'Option A';
},
),
//what would I put in the onTap property to get the app to build the OneOfTheWidgetsToBuild widget in the Display Container below based off the updated string value?
SizedBox(
height: 5,
),
Button(text: 'option B', onTap: null),
],
),
),
Expanded(
child: Column(
children: [
SizedBox(
height: 50,
),
Center(
child: Container(
//DISPLAY CONTAINER
height: 40,
width: 100,
color: Colors.yellow,
child: Center(
child: Text(
'$displayText',
style: TextStyle(color: Colors.black),
),
),
),
)
],
),
),
Expanded(
child: Column(
children: [
SizedBox(
height: 50,
),
Button(text: 'option C', onTap: null),
SizedBox(
height: 5,
),
Button(text: 'option D', onTap: null),
],
),
),
],
),
);
}
}
下面是中间框中显示的小部件:
class OneOfTheWidgetsToBuild extends StatelessWidget {
const OneOfTheWidgetsToBuild({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 40,
width: 100,
color: Colors.green,
);
}
}
非常感谢你的帮助
1条答案
按热度按时间vhmi4jdf1#
一种方法是使用
switch
case和一个函数来正确地呈现正确的小部件,而不是使用一堆if
/else
语句。例如:
创建小部件:
然后,创建一个函数来更新该小部件
然后,在
Build
方法中: