是否有可能更改面板以及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()
);
}
}