Android应用-flutter使用Positioned将控件定位到底部中间

场景描述

要将Positioned定位到屏幕底部中间的位置，你可以使用MediaQuery来获取屏幕的高度，然后设置Positioned的bottom属性和left或right属性，一般我们left和right都会设置一个值让控制置于合适的位置，那么如何使其位于底部中央？

示例

以下是一个示例代码：

import 'package:Flutter/material.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('Positioned Example'),        ),        body: MyPositionedWidget(),      ),    );  }}class MyPositionedWidget extends StatelessWidget {  @override  Widget build(BuildContext context) {    double screenHeight = MediaQuery.of(context).size.height;    return Stack(      children: [        // Your main content Goes here        Center(          child: Text(            'Main Content',            style: TextStyle(fontSize: 20),          ),        ),        // Positioned at the bottom center        Positioned(          bottom: 0,          left: 0,          right: 0,          child: Container(            height: 50,            color: Colors.blue,            child: Center(              child: Text(                'Positioned at the bottom center',                style: TextStyle(color: Colors.white),              ),            ),          ),        ),      ],    );  }}

解释

在这个例子中，Positioned包含一个具有蓝色背景的Container，该Container位于屏幕的底部中央。bottom: 0确保它位于屏幕底部，而left: 0和right: 0使其水平方向上充满整个屏幕宽度。你可以根据需要调整高度、颜色和内容。

结束语 Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！

来源地址：https://blog.csdn.net/yikezhuixun/article/details/134997242