FractionallySizedBox 按比例显示

最新推荐文章于 2024-10-20 16:56:05 发布

原创最新推荐文章于 2024-10-20 16:56:05 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

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

在屏幕上按比例显示内容

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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}