颤振 - FloatingActionButton在中心

问题描述：

是否可以将FloatingActionButton保留在中心而不是右侧？颤振 - 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:(){} 
    ) 
); 
}

答

尝试在Center部件包裹，或在你的Column使用CrossAxisAlignment.center一个crossAxisAlignment。

你应该选择你的Column的一部分被包裹在一个Flexible将崩溃，以避免溢出，或部分或全部替代它与一个ListView，使用户可以滚动查看被隐藏的部分。

但其中在floatingActionButton或在本体的底部中心的？ – rafaelcb21

我尝试在floatingActionButton属性中新的中心包裹新的FloatingActionButton，该按钮大约在屏幕的中心，而不是在屏幕底部的中心 – rafaelcb21

使其成为列的最后一个元素。您也可以在您的Column上使用CrossAxisAlignment.center的crossAxisAlignment –

答

我修改了代码，现在该按钮位于底部中心，但我不知道这是否会永远停留在底部，无论画面的大小。

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:(){} 
      ) 
      ], 
     ) 
     ], 
    ), 
); 
}

答

通过改变使用crossAxisAlignment，所述mainAxisAlignment和柔性的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:(){} 
      ) 
     )   
     ) 
     ], 
    ), 
); 
}

颤振 - FloatingActionButton在中心

相关推荐