如何在 Flutter 中使圖標按鈕重疊容器小部件？

Question

我真的是 Flutter 的新手。 在主頁中，我打算構建這樣的頁面：

其他小部件工作得很好，但是當我開始開發像下面重疊容器小部件的設計這樣的雙按鈕時，它根本不起作用。

我的第一種方法是使用包含Positioned小部件（用於雙按鈕）和Container （用於其他東西）的Stack 。 但是，盡管有一個虛擬的子小部件，但Positioned小部件根本不可見，而Container卻完美地工作。 不知道是Positioned寫錯了，還是別的。

這是源代碼： https : //github.com/andre-nk23/packme/blob/master/lib/main.dart

有人能幫我一下嗎？ 使這兩個按鈕重疊容器？ 謝謝你。

注意：我使用了幾個導入的包，如果這些包影響了重疊雙按鈕的開發過程，請通知我。

Answer 1

你有沒有試過堆棧？ 你可以用很多方法來處理，我只是匆忙做的。看看

Container(
          height: 280,
          width: 400,
          child: Stack(
            children: [
              Positioned(
                bottom: 0,
                child: Container(
                  height: 250,
                  width: 400,
                  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
                  ),
                ),
              ),
              Positioned(
                top: 0,
                left: 100,
                child: FloatingActionButton(
                  onPressed: (){},
                  child: Icon(
                    Icons.check_box
                  ),
                ),
              ),
            ],
          ),
        )

Answer 2

使用 Row 在容器中定位兩個按鈕。

     Container(
              height: 280,
              width: MediaQuery.of(context).size.width,
              child: Stack(
                children: [
                  Positioned(
                    bottom: 0,
                    child: Container(
                      height: 250,
                      width: 400,
                      decoration: BoxDecoration(
                          color: Colors.pinkAccent,
                      ),
                    ),
                  ),
                  Positioned(
                    child: Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,                   children: [
                        FloatingActionButton(
                          onPressed: (){},
                          child: Icon(
                              Icons.person
                          ),
                        ),
                      FloatingActionButton(
                        onPressed: (){},
                        child: Icon(
                            Icons.face
                        ),
                      ),
                      ],
                    ),
                  ),
                ],
              ),
            )

Answer 3

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, 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, color: HexColor('#030835')),
                title: Text('Profil', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(FeatherIcons.clock, color: HexColor('#030835')),
                title: Text('Riwayat', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(FeatherIcons.moon, color: HexColor('#030835')),
                title: Text('Mode gelap', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(Icons.attach_money, color: HexColor('#030835')),
                title: Text('Gabung kami', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(Icons.info_outline_rounded,
                    color: HexColor('#030835')),
                title: Text('Informasi', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading:
                    Icon(Icons.settings_outlined, color: HexColor('#030835')),
                title: Text('Pengaturan', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(Icons.logout, color: HexColor('#030835')),
                title: Text('Keluar', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
          ],
        ),
      ),
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(80.0),
        child: AppBar(
          centerTitle: true,
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
          leading: Padding(
            padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
            child: new IconButton(
                icon: new Icon(Icons.donut_large_rounded,
                    size: 25, color: HexColor('#030835')),
                onPressed: () => _scaffoldKey.currentState.openDrawer(),
                color: HexColor('#B9EEDC')),
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 20, 30, 0),
              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, size: 30),
          Icon(FeatherIcons.box, size: 30),
        ],
        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, 30, 55),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      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',
                          style: GoogleFonts.poppins(
                            textStyle: Theme.of(context).textTheme.headline1,
                            fontSize: 18,
                            fontWeight: FontWeight.w400,
                            color: HexColor('#030835'),
                          ),
                        ),
                        Text(
                          'untuk mulai meminjam',
                          style: GoogleFonts.poppins(
                            textStyle: Theme.of(context).textTheme.headline1,
                            fontSize: 18,
                            fontWeight: FontWeight.w400,
                            color: HexColor('#030835'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
             /* Here are the changes */
                Positioned( 
                  left: 75,
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Icon(Icons.check_box),
                  ),
                ), 
                Positioned(
                  right: 75,
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Icon(Icons.check_box),
                  ),
                ),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

您好 Andrea，這是您可以完美實現的必要代碼。 好吧，我已經刪除了用於使代碼更清晰的冗余小部件。我使用堆棧來實現您的問題。