flutter - Flutter，如何将容器视为面板或类似的东西？
问题描述
是否有可能更改面板以及 java？查看此视频https://youtu.be/cpGw6rnQNxg，我希望能够在颤动中进行这种转换，我的意思是我想将此主容器视为面板，然后当用户点击任何我在那个屏幕上的按钮我希望能够改变面板，但只是那个面板而不是所有的屏幕。
这是实际代码，您可以毫无问题地编译它，没有依赖关系
import 'package:flutter/material.dart';
class Prueba2 extends StatefulWidget {
Prueba2({Key key}) : super(key: key);
@override
_PruebaState createState() => _PruebaState();
}
class _PruebaState extends State<Prueba2> {
List<bool> isSelected;
@override
void initState() {
super.initState();
isSelected = [true, false];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.only(top: 40, left: 10),
child: isSelected[0]
? Container(
color: Colors.white,
width: (MediaQuery.of(context).size.width) - 20,
height: 240,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ToggleButtons(
borderColor: Colors.black,
fillColor: Colors.grey,
borderWidth: 2,
selectedBorderColor: Colors.black,
selectedColor: Colors.white,
borderRadius: BorderRadius.circular(20),
children: <Widget>[
Container(
width: 225,
child:
Container(child: Center(child: Text('Ida'))),
),
Container(
width: 225,
child: Container(
child: Center(child: Text('Ida y Vuelta'))),
),
],
isSelected: isSelected,
onPressed: (index) {
setState(() {
for (var i = 0; i < isSelected.length; i++) {
if (i == index) {
isSelected[i] = true;
} else {
isSelected[i] = false;
}
}
});
},
),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Container(
width: 220,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Origen'),
icon: Icon(Icons.airline_seat_recline_extra),
onPressed: () {},
),
),
SizedBox(
width: 10,
),
Container(
width: 220,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Destino'),
icon: Icon(Icons.airline_seat_recline_extra),
onPressed: () {},
),
)
],
),
SizedBox(
height: 20,
),
Row(
children: <Widget>[
Container(
width: 330,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Fecha de partida'),
icon: Icon(Icons.calendar_today),
onPressed: () {},
),
),
SizedBox(
width: 20,
),
Container(
width: 100,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('+ 1 -'),
icon: Icon(Icons.directions_run),
onPressed: () {},
),
)
],
),
SizedBox(
height: 10,
),
Container(
width: 450,
child: RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Text('Buscar',
style: TextStyle(
color: Colors.white, fontSize: 20)),
onPressed: () {},
),
)
],
),
)
: Container(
color: Colors.white,
width: (MediaQuery.of(context).size.width) - 20,
height: 240,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ToggleButtons(
borderColor: Colors.black,
fillColor: Colors.grey,
borderWidth: 2,
selectedBorderColor: Colors.black,
selectedColor: Colors.white,
borderRadius: BorderRadius.circular(20),
children: <Widget>[
Container(
width: 225,
child:
Container(child: Center(child: Text('Ida'))),
),
Container(
width: 225,
child: Container(
child: Center(child: Text('Ida y Vuelta'))),
),
],
isSelected: isSelected,
onPressed: (index) {
setState(() {
for (var i = 0; i < isSelected.length; i++) {
if (i == index) {
isSelected[i] = true;
} else {
isSelected[i] = false;
}
}
});
},
),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Container(
width: 220,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Origen'),
icon: Icon(Icons.airline_seat_recline_extra),
onPressed: () {},
),
),
SizedBox(
width: 10,
),
Container(
width: 220,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Destino'),
icon: Icon(Icons.airline_seat_recline_normal),
onPressed: () {},
),
)
],
),
SizedBox(
height: 20,
),
Row(
children: <Widget>[
Container(
width: 330 / 2,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Fecha de ida'),
icon: Icon(Icons.calendar_today),
onPressed: () {},
),
),
SizedBox(
width: 10,
),
Container(
width: 330 / 2,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('Fecha de vuelta'),
icon: Icon(Icons.calendar_today),
onPressed: () {},
),
),
SizedBox(
width: 10,
),
Container(
width: 100,
height: 50,
child: RaisedButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.grey[200],
label: Text('+ 1 -'),
icon: Icon(Icons.directions_run),
onPressed: () {},
),
)
],
),
SizedBox(
height: 10,
),
Container(
width: 450,
child: RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Text('Buscar',
style: TextStyle(
color: Colors.white, fontSize: 20)),
onPressed: () {},
),
)
],
),
)));
}
}
解决方案
您可以使用 PageView。这是一个如何实现的示例，请尝试一下：
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page view example'),
),
body: Column(
children: <Widget>[
Expanded(
child: Container(
alignment: Alignment.center,
child: Text('Other content'),
),
),
Container(
height: 200,
child: PageView(
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
children: <Widget>[
Container(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
RaisedButton(
child: Text('Next'),
onPressed: nextPage,
),
RaisedButton(
child: Text('Go to page 3'),
onPressed: () => goToPage(2),
),
],
)
),
Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
RaisedButton(
child: Text('Previous'),
onPressed: prevPage,
),
RaisedButton(
child: Text('Next'),
onPressed: nextPage,
),
],
)
),
Container(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
RaisedButton(
child: Text('Previous'),
onPressed: prevPage,
),
RaisedButton(
child: Text('Go to page 1'),
onPressed: () => goToPage(0),
),
],
)
),
],
)
),
],
),
);
}
void nextPage() {
_pageController.animateToPage(_pageController.page.toInt() + 1,
duration: Duration(milliseconds: 700),
curve: ElasticOutCurve()
);
}
void prevPage() {
_pageController.animateToPage(_pageController.page.toInt() - 1,
duration: Duration(milliseconds: 700),
curve: ElasticOutCurve()
);
}
void goToPage(int pageNumber) {
_pageController.animateToPage(pageNumber,
duration: Duration(milliseconds: 700),
curve: ElasticOutCurve()
);
}
}
推荐阅读
- android - 饼图 - 如何删除饼图上的 x 标签并在其旁边显示 ite？
- timestamp - 有没有办法将用户消息与 slack 中的自定义 Bot 响应链接起来，而无需线程化消息？
- haskell - Emacs Haskell Intero 问题
- python - Pygame中的按键不起作用
- java - 在 VisualVM 内存分析中选择记录分配堆栈跟踪选项时应用程序崩溃
- java - 使用 org.apache.commons.vfs.FileObject.copyFrom() 时出现 Java SFTP 错误
- django - 无法从 Django Docker 实例内部访问项目绝对 URL
- c# - 使用 C# WMI 和 acronis 映像的相同硬件 ID
- ngx-uploader - Angular 5 的支持版本是什么
- java - 使用 Java 1.8 构建并在 Java 1.7 中部署