[英]How to center the Text in the middle of the Container? Flutter
我想将我的文本放在我的容器中间,但它们只将它们放在容器的顶部中间。 这是我的代码:
import 'package:flutter/material.dart';
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
@override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Homepage'),
backgroundColor: Colors.green,
),
body: SafeArea(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Text('BLE & Data'),
),
//const SizedBox(height: 10),
Container(
margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Text('Statistiken',
textAlign: TextAlign.center,),
),
const SizedBox(height: 10),
Container(
//padding: EdgeInsets.all(50),
margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Text('Personal Data',
textAlign: TextAlign.center,
),
),
],
),
));
}
}
这就是我的 output:演示
如果有人能解决我的问题,我将不胜感激
将您想要的任何内容包裹在Center小部件中:
例如:
Container(
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: Center( child: const Text('BLE & Data') ),
),
您只需要使用中心小部件包装您的文本小部件。
Center(child:Text("")),
添加此代码:-
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
@override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Homepage'),
backgroundColor: Colors.green,
),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Center(child: Text('BLE & Data')),
),
//const SizedBox(height: 10),
Container(
margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Center(
child: Text(
'Statistiken',
textAlign: TextAlign.center,
),
),
),
const SizedBox(height: 10),
Container(
//padding: EdgeInsets.all(50),
margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Center(
child: Text(
'Personal Data',
textAlign: TextAlign.center,
),
),
),
],
),
),
));
}
}
使用alignment: Alignment.center
of container()
小部件。
class Homepage extends StatefulWidget {
const Homepage({Key key}) : super(key: key);
@override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Homepage'),
backgroundColor: Colors.green,
),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Text('BLE & Data'),
),
//const SizedBox(height: 10),
Container(
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Text(
'Statistiken',
textAlign: TextAlign.center,
),
),
const SizedBox(height: 10),
Container(
alignment: Alignment.center,
//padding: EdgeInsets.all(50),
margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
height: 100,
width: 300,
color: Colors.green,
child: const Text(
'Personal Data',
textAlign: TextAlign.center,
),
),
],
),
),
));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.