微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在Flutter中使图标按钮与容器小部件重叠?

如何解决如何在Flutter中使图标按钮与容器小部件重叠?

我真的对Flutter陌生。在首页中,我打算构建如下页面

enter image description here

其他小部件工作得很好,但是当我要开发像下面的容器小部件重叠的设计那样的双按钮时,它根本无法工作。

我的第一种方法是使用Stack,其中包含Positioned小部件(用于双按钮)和Container(用于其他东西)。但是,尽管Positioned小部件尽管有一个虚拟子小部件,但它根本不可见,而Container则可以正常工作。我不知道Positioned的书写方式是否错误

这是源代码https://github.com/andre-nk23/packme/blob/master/lib/main.dart

有人可以在这里帮助我吗?要使这两个按钮与容器重叠?谢谢。

注意:我正在使用几个导入的程序包,如果这些程序包影响开发重叠双键的过程,请通知我。

解决方法

您尝试过Stack吗?您可以采用多种方法来处理,我只是匆忙完成。看看Image

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))

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。