我是Flutter的新手,试图将文本水平居中。请检查以下代码。
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
color: Colors.black,
child: Row(
children: <Widget>[
Column(
children: <Widget>[_buildTitle()],
),
],
));
}
Widget _buildTitle() {
return
Center(child: Container(
margin: EdgeInsets.only(top: 100),
child: Column(
children: <Widget>[
Text(
"something.xyz",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25,),
textAlign: TextAlign.center,
),
],
),
),);
}
}
这不是水平居中,而是提供以下输出。利润率等都很好。
我怎样才能解决这个问题?
试试这个
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: LoginPage()));
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
color: Colors.black,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[_buildTitle()],
),
],
)),
);
}
Widget _buildTitle() {
return Center(
child: Container(
margin: EdgeInsets.only(top: 100),
child: Column(
children: <Widget>[
Text(
"something.xyz",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25,
),
// textAlign: TextAlign.center,
),
],
),
),
);
}
}
我为这个用例添加了自己的小部件,它比行解决方案短得多:
import 'package:flutter/material.dart';
class CenterHorizontal extends StatelessWidget {
CenterHorizontal(this.child);
final Widget child;
@override
Widget build(BuildContext context) =>
Row(mainAxisAlignment: MainAxisAlignment.center,children: [child]);
}
结果是这样的:
CenterHorizontal(Text('this is horizontal centered'))
如果我理解,你只想水平居中标题,而不是我想的可能出现的其他元素。
看看下面的代码:
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueAccent,
title: Text("DEMO"),
),
body: Container(
color: Colors.black,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[_buildTitle()],
),
Row(
children: <Widget>[
// add other elements that you don't to center horizontally
Text(
"other elements here",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
],
),
],
)));
}
Widget _buildTitle() {
return Container(
margin: EdgeInsets.only(top: 100),
child: Text(
"something.xyz",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
);
}
}
结果给出:here
更简单的方法:
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Sunday', style: TextStyle(fontSize: 20),),
],
),
), //Center