问题描述
其他小部件工作得很好,但是当我要开发像下面的容器小部件重叠的设计那样的双按钮时,它根本无法工作。
我的第一种方法是使用Stack
,其中包含Positioned
小部件(用于双按钮)和Container
(用于其他东西)。但是,尽管Positioned
小部件尽管有一个虚拟子小部件,但它根本不可见,而Container
则可以正常工作。我不知道Positioned
的书写方式是否错误。
这是源代码: https://github.com/andre-nk23/packme/blob/master/lib/main.dart
有人可以在这里帮助我吗?要使这两个按钮与容器重叠?谢谢。
注意:我正在使用几个导入的程序包,如果这些程序包影响开发重叠双键的过程,请通知我。
解决方法
您尝试过Stack吗?您可以采用多种方法来处理,我只是匆忙完成。看看
Container(
height: 280,width: 400,child: Stack(
children: [
Positioned(
bottom: 0,child: Container(
height: 250,decoration: BoxDecoration(
color: Colors.pinkAccent,borderRadius: BorderRadius.only(
topRight: Radius.circular(30),topLeft: Radius.circular(30),)
),),Positioned(
top: 0,right: 100,child: FloatingActionButton(
onPressed: (){},child: Icon(
Icons.check_box
),left: 100,],)
,
void main() => runApp(MaterialApp(
home: BottomNavBar(),));
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
// ignore: unused_field
int _page = 0;
String tabAccent = '#B9EEDC';
String pinkAccent = '#FF8787';
String greenAccent = '#43D1A5';
String blueAccent = '#030835';
String buttonAccent = '#CDF0E0';
GlobalKey _bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,drawer: new Drawer(
child: ListView(
children: [
Container(
height: 210,child: DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
CircleAvatar(
backgroundImage: AssetImage('assets/img.jpeg'),maxRadius: 30,Column(
crossAxisAlignment: CrossAxisAlignment.center,children: [
Text(
'Julian Casablancas',textScaleFactor: 1.6,Padding(
padding: EdgeInsets.fromLTRB(0,5,0),child: Text(
'julian.c@gmail.com',textScaleFactor: 1.1,)
],)
]),decoration: BoxDecoration(color: HexColor('#CDF0E0')),ListTile(
leading: Icon(FeatherIcons.home,color: HexColor('#030835')),title: Text('Beranda',textScaleFactor: 1.2),tileColor: HexColor('#CDF0E0'),selectedTileColor: HexColor('#A4E7CE'),ListTile(
leading: Icon(Icons.person_outlined,size: 25,title: Text('Profil',selectedTileColor: HexColor('#A4E7CE')),ListTile(
leading: Icon(FeatherIcons.clock,title: Text('Riwayat',ListTile(
leading: Icon(FeatherIcons.moon,title: Text('Mode gelap',ListTile(
leading: Icon(Icons.attach_money,title: Text('Gabung kami',ListTile(
leading: Icon(Icons.info_outline_rounded,title: Text('Informasi',ListTile(
leading:
Icon(Icons.settings_outlined,title: Text('Pengaturan',ListTile(
leading: Icon(Icons.logout,title: Text('Keluar',appBar: PreferredSize(
preferredSize: Size.fromHeight(80.0),child: AppBar(
centerTitle: true,backgroundColor: Colors.transparent,shadowColor: Colors.transparent,leading: Padding(
padding: EdgeInsets.fromLTRB(20,20,child: new IconButton(
icon: new Icon(Icons.donut_large_rounded,onPressed: () => _scaffoldKey.currentState.openDrawer(),color: HexColor('#B9EEDC')),actions: [
Padding(
padding: const EdgeInsets.fromLTRB(0,30,child: Image(
image: AssetImage('assets/img.jpeg'),height: 40,bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,index: 0,height: 60.0,items: <Widget>[
Icon(Icons.qr_code_rounded,size: 30),Icon(Icons.attach_money_rounded,Icon(FeatherIcons.box,color: HexColor('#B9EEDC'),buttonBackgroundColor: HexColor('#B9EEDC'),backgroundColor: HexColor('#ECFBF4'),animationCurve: Curves.easeInOut,animationDuration: Duration(milliseconds: 300),onTap: (index) {
setState(() {
_page = index;
});
},body: SafeArea(
child: Container(
color: Colors.red,child: Column(
mainAxisAlignment: MainAxisAlignment.end,crossAxisAlignment: CrossAxisAlignment.center,children: [
Stack(overflow: Overflow.visible,children: <Widget>[
Container(
margin: EdgeInsets.only(top: 25.0),width: 500,color: HexColor('#ECFBF4'),child: Padding(
padding: EdgeInsets.fromLTRB(30,35,55),child: Column(
mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Icon(FeatherIcons.info,size: 25),Icon(FeatherIcons.clock,size: 25)
],SizedBox(height: 10),Text(
'Scan QR',style: GoogleFonts.poppins(
textStyle: Theme.of(context).textTheme.headline1,fontSize: 28,fontWeight: FontWeight.w700,color: HexColor('#030835'),SizedBox(height: 2),Text(
'di restoran / driver',fontSize: 18,fontWeight: FontWeight.w400,Text(
'untuk mulai meminjam',/* Here are the changes */
Positioned(
left: 75,child: FloatingActionButton(
onPressed: () {},child: Icon(Icons.check_box),Positioned(
right: 75,]),);
}
}
Hello Andrea,这是可以完美实现的必要代码。好吧,我删除了用于使代码更整洁的冗余小部件。我使用堆栈来实现您的问题。
,使用行将两个按钮定位在容器中。
# data table
dt <- data.table(ID=c(rep(1:3,each=3)),attrib1=rep(c("sdf","gghgf","eww"),each=3),attrib2=rep(c("444","222","777"),Year = rep(c(1990,1995,1996),3),value = c(12,6,7,3,1,9,17,18))