颤动 - 中心的FloatingActionButton

Question

是否有可能使FloatingActionButton在中心而不是右侧？

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
      ],
    ),
    floatingActionButton: new FloatingActionButton(
      elevation: 0.0,
      child: new Icon(Icons.check),
      backgroundColor: new Color(0xFFE57373),
      onPressed: (){}
    )
  );
}

Answer 1

尝试将其包裹在Center小部件中，或在crossAxisAlignment上使用CrossAxisAlignment.center的Column。

您应该选择Column的一部分包裹在Flexible中，它将折叠以避免溢出，或用ListView替换部分或全部，以便用户可以滚动查看隐藏的部分。

Answer 2

我不知道这个问题是否已被添加，因为这个问题是第一次回答，但现在floatingActionButtonLocation类的Scaffold属性。

在原始问题中它会像这样工作：

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    // ...

    floatingActionButton: new FloatingActionButton(
      // ...FloatingActionButton properties...
    ),

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

另见文档：

• Scaffold类（搜索floatingActionButtonLocation）：https://docs.flutter.io/flutter/material/Scaffold-class.html
• ...和FloatingActionButtonLocation类：https://docs.flutter.io/flutter/material/FloatingActionButtonLocation-class.html

Answer 3

使用新的flutter API，您可以非常轻松地将Scattold中的floatingActionButtonLocation属性更改为

FloatingActionButtonLocation.centerFloat

示例：

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerFloat,
  bottomNavigationBar: new BottomAppBar(
    color: Colors.white,
    child: new Row(...),
  ),
);

Answer 4

您可以使用容器和对齐小部件，如下所示：

@override
Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(

      ),
      floatingActionButton: Container(
        padding: EdgeInsets.only(bottom: 100.0),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: FloatingActionButton.extended(
            onPressed: _getPhoneAuthResult,
            icon: Icon(Icons.phone_android),
            label: Text("Authenticate using Phone"),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

Answer 5

通过更改逻辑以使用crossAxisAlignment，mainAxisAlignment和Flexible the FloatingActionButton位于屏幕底部的中心位置

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,       
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Flexible(
          child: new Container(
            padding: new EdgeInsets.only(bottom: 16.0),
            child: new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          )         
        )
      ],
    ), 
  );
}

Answer 6

我修改了代码，现在按钮位于底部中心，但我不知道它是否总是保持在底部，无论屏幕大小如何。

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Stack(
          alignment: new FractionalOffset(0.5, 1.0),
          children: <Widget>[
            new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          ],
        )
      ],
    ), 
  );
}