Flutter之Center

最新推荐文章于 2024-05-27 23:55:33 发布

weixin_44519342

最新推荐文章于 2024-05-27 23:55:33 发布

阅读量425

点赞数

分类专栏：前端高级文章标签： flutter 前端

原文链接：http://www.mark-to-win.com/tutorial/51856.html

版权

前端高级专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文介绍了Flutter中的Center组件，它用于将子控件居中显示。Center是Align的子类，默认设置为水平和垂直居中。文中通过两个测试代码展示了如何在Center中分别放置Text和Container，并调整Container的尺寸。更多Flutter布局知识，请参考链接。

摘要由CSDN通过智能技术生成

1、Center介绍

Center将子控件放在其内部中心，里面只能放一个child，但是child里面可以放Container

Center继承勒Align，然后Align默认是center.

2、测试代码

测试1、

      @override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  // Here we take the value from the MyHomePage object that was created by
                  // the App.build method, and use it to set our appbar title.
                  title: Text('hello flutter'),
                ),
                body: Center(
                  child: Text("chenyu"),
                ),
              ),
          );
      }
    }

测试2、

      @override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  // Here we take the value from the MyHomePage object that was created by
                  // the App.build method, and use it to set our appbar title.
                  title: Text('hello flutter'),
                ),
                body: Center(
                  child: Container(
                    color: Colors.blue,
                    width: 200,
                    height: 200,
                  ),
                ),
              ),
          );
      }
    }