当前位置：酷客网 > Flutter教程 > Flutter页面布局 > Flutter 设置具体尺寸

Flutter 设置具体尺寸

2020-12-29 分类：Flutter页面布局 阅读(928) 评论(0)

Flutter 设置具体尺寸（SizedBox），SizedBox组件是一个特定大小的盒子，这个组件强制它的child有特定的宽度和高度。如果宽度或高度为null，则此组件将调整自身大小以匹配该维度中child的大小。

SizedBox组件的主要属性如下所示：
Flutter 设置具体尺寸

接下来我们写个例子，添加一个SizedBox容器，在其中放一个Card，那么Card就被限定在宽200、高300的范围内。完整的示例代码如下：

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SizedBox设置具体尺寸示例'),
        ),
        body: SizedBox(
          //固定宽为200.0 高为300.0
          width: 200.0,
          height: 300.0,
          child: const Card(
              child: Text('SizedBox',
                style: TextStyle(
                  fontSize: 36.0,
                ),
              ),
          ),
        ),
      );
    }
  }
  void main() {
    runApp(
      MaterialApp(
        title: 'SizedBox设置具体尺寸示例',
        home: LayoutDemo(),
      ),
    );
  }

上述示例代码的视图展现大致如图所示:
Flutter 设置具体尺寸

酷客教程相关文章：

赞(0)

相关推荐

评论 抢沙发

评论前必须登录！

 

Flutter页面布局