以下是一个示例代码,演示了如何在不使用中心控件的情况下将文本小部件保持居中:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Center Text Widget',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Center Text Widget'),
),
body: CenterTextWidget(
child: Text(
'Hello World',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}
class CenterTextWidget extends StatefulWidget {
final Widget child;
const CenterTextWidget({Key key, this.child}) : super(key: key);
@override
_CenterTextWidgetState createState() => _CenterTextWidgetState();
}
class _CenterTextWidgetState extends State {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Align(
alignment: Alignment.center,
child: Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
child: widget.child,
),
);
},
);
}
}
在这个示例中,我们创建了一个名为CenterTextWidget
的自定义小部件。该小部件使用LayoutBuilder
来获取其父部件的约束,并将约束应用于子部件的容器中。通过设置子部件容器的宽度和高度为父部件约束的最大宽度和高度,我们可以保持文本小部件在父部件中居中显示。最后,我们在MyApp
中使用CenterTextWidget
来包装Text
小部件,并将其放置在Scaffold
的主体中。