Question

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

但是，当我尝试使用Stack时，显示在底部应用栏中的FAB出现了，但是堆栈小部件下的两个FAB却不可见。

docked FAB

FABs under stack widget

我在其中定义了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,
              ),
            ),
          ],
        ),

Answer 1

您不需要其他FloatingActionsButton来进行设计。我了解的是，您需要上部不滚动内容，因此您想到了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,
      ),
    );

这是结果

定义了floatActionButtonLocation时如何使用堆栈添加FAB？

1 个答案: