FractionallySizedBox 按比例显示

computerclass

于 2021-06-22 09:59:31 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/computerclass/article/details/118100703

flutter 专栏收录该内容

220 篇文章

订阅专栏

该博客展示了如何在Flutter应用中使用FractionallySizedBox widget来实现内容按比例在屏幕上显示。代码示例中，创建了一个宽度占屏幕80%的TextButton，背景颜色为绿色，点击事件为空。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在屏幕上按比例显示内容

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: FractionallySizedBox(
            widthFactor: 0.8,
            child: TextButton(
              child: Text("Press Here"),
              onPressed: null,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
              ),
            ),
          ),
        ),
      ),
    );
  }
}