flutter - 定义floatingActionButtonLocation时如何使用堆栈添加FAB？

Question

在我的应用程序中，我定义了一个属性floatingActionButtonLocation设置为FloatingActionButtonLocation.centerDocked. 我已经定义了一个底部的应用栏，其中包含 centerDocked FAB。我还想使用一个Stack小部件将两个额外的 FAB 放置在屏幕的右上角。它应该看起来与此类似 -预期结果

但是当我尝试使用 aStack时，会显示底部应用栏中存在的 FAB，但堆栈小部件下的两个 FAB 是不可见的。

对接FAB

堆栈小部件下的 FAB

我定义的代码Stack

 return new Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: Stack(
          children: <Widget>[
         Positioned(

           // the below values for stack are experimental at the moment

           left: MediaQuery.of(context).copyWith().size.width * 0.60,
           right: MediaQuery.of(context).copyWith().size.width * 0.01,
//           top: MediaQuery.of(context).copyWith().size.height * 0.20,
//           bottom: MediaQuery.of(context).copyWith().size.height * 0.7,
           child: Row(
             children: <Widget>[

               // invisible FABs

               FloatingActionButton(
                 onPressed: (){
                   _animate2Pagenegative();
//              print(widget.date);
                 },
                 child: Icon(Icons.fast_rewind),
                 heroTag: UniqueKey(),
               ),
               FloatingActionButton(
                 onPressed: (){
                   _animate2Pageforward();
//              print(widget.date);
                 },
                 heroTag: UniqueKey(),
                 child: Icon(Icons.fast_forward),
               ),
             ],
           ),
         ),

            // FAB which is displayed correctly
            FloatingActionButton(
              backgroundColor: Colors.red,
              onPressed: () async{
                String result1 =   await Navigator.push( // string which stores the user entered value
                    context,
                    MaterialPageRoute(
                      builder: (context) => InputScreen(), //screen which has TextField
                    ));
                setState(() {
                  addItem(result1, false, "");
                });
              },
              tooltip: 'Add a task',
              child: Icon(Icons.add),
              elevation: 0.0,
            ),
          ],
        ),
)

脚手架主体：

  body: new Column(
          children: <Widget>[
            new Expanded(
              child: new DaysPageView(
//                onDaysChanged: getDatestring,
                physics: new NeverScrollableScrollPhysics(),
                dayoverride: getDate(widget.date),
                scrollDirection: _scrollDirection,
                pageSnapping: _pageSnapping,
                reverse: _reverse,
                controller: _daysPageController,
                pageBuilder: _daysPageBuilder,
              ),
            ),
          ],
        ),

标签： flutter

Answer 1

您不需要其他 FloatingActionsButtons 来进行该设计。我的理解是，您需要上部不要滚动内容，因此您想到了 FAB。有多种方法可以实现这一目标。这是一个示例，我使用颜色向您展示屏幕的不同部分。当然，这些是随机尺寸来展示案例。

return new Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: 150,
            color: Colors.red,
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 20, left: 20),
                child: Text(
                  "- 2 TASKS MORE",
                  style: TextStyle(
                    fontSize: 35
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  print('left arrow pressed');
                },
                child: Container(
                    margin: EdgeInsets.only(top: 20, left: 20),
                    child: Icon(Icons.arrow_left)
                ),
              ),
              GestureDetector(
                onTap: () {
                  print('right arrow pressed');
                },
                child: Container(
                    margin: EdgeInsets.only(top: 20, left: 20),
                    child: Icon(Icons.arrow_right)
                ),
              )
            ],
          ),
          SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            child: Column(
              children: <Widget>[
                Container(
                  height: 600,
                  color: Colors.deepPurpleAccent,
                ),
              ],
            ),
          )
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[

          ],
        ),
        shape: CircularNotchedRectangle(),
        color: Colors.red,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red,
        onPressed: ()
        async {
          print('FAB pressed');
        },
        tooltip: 'Add a task',
        child: Icon(Icons.add),
        elevation: 0.0,
      ),
    );

这是结果