首页 > 其他分享 >flutter设置宽高不生效

flutter设置宽高不生效

时间:2024-07-07 16:41:26浏览次数:8  
标签:color 生效 宽高 TapboxAState Colors key child active flutter

给设置宽高的Container包一个父组件(如Center)即可
参考文章-写了为什么会这样
原代码


class TapboxA extends StatefulWidget {
  TapboxA({Key? key}) : super(key: key);

  @override
  _TapboxAState createState() => _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
        child: Container(
          child: Center(
            child: Text(
              _active ? 'Active' : 'Inactive',
              style: TextStyle(fontSize: 32.0, color: Colors.white),
            ),
          ),
          width: 200.0,
          height: 200.0,
          decoration: BoxDecoration(
            color: _active ? Colors.lightGreen[700] : Colors.grey[600],
          ),
        ),
    );
  }
}

修改后


class TapboxA extends StatefulWidget {
  TapboxA({Key? key}) : super(key: key);

  @override
  _TapboxAState createState() => _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Center(
        child: Container(
          child: Center(
            child: Text(
              _active ? 'Active' : 'Inactive',
              style: TextStyle(fontSize: 32.0, color: Colors.white),
            ),
          ),
          width: 200.0,
          height: 200.0,
          decoration: BoxDecoration(
            color: _active ? Colors.lightGreen[700] : Colors.grey[600],
          ),
        ),
      ),
    );
  }
}

标签:color,生效,宽高,TapboxAState,Colors,key,child,active,flutter
From: https://www.cnblogs.com/ayubene/p/18288671

相关文章

  • 前端学习-flutter学习-003-Widget 简介
    学习链接什么是widget描述UI元素的配置信息Widget类本身是一个抽象类,其中最核心的就是定义了createElement()接口,在Flutter开发中,我们一般都不用直接继承Widget类来实现一个新组件,相反,我们通常会通过继承StatelessWidget或StatefulWidget来间接继承widget类来实现。Stateless......
  • serverpod 基于dart 的flutter 下一代app 以及web server 开发框架
    serverpod按照官方的介绍是基于dart的flutter下一代app以及webserver开发框架包含的能力代码生成 可以辅助通过分析server端代码生成客户端代码,这样调用就比较方便了trpc就干了这类的事情世界一流的日志处理内置cache 内置cache可以减少数据库的开销简单方便使用......
  • 前端学习-flutter学习-002-计数器示例学习
    学习参考链接拆解代码学习Material是一种标准的移动端和web端的视觉设计语言,Flutter默认提供了一套丰富的Material风格的UI组件。//导入了MaterialUI组件库。import'package:flutter/material.dart';main函数为应用程序的入口。main函数中调用了runApp方法......
  • flutter状态管理 provider使用
    provider是flutter官方推荐的状态管理插件,是基于InheritedWidget实现的。下面我们来讲一个provider的使用方法。1.在pubspec.yaml文件中添加provider:^6.1.2开发文档:https://pub-web.flutter-io.cn/packages/provider可以查看使用方法和最新版本号。添加完成后,进行保......
  • flutter 插件开发
    先引用一段官方的介绍说明:https://docs.flutter.cn/packages-and-plugins/developing-packagesPackage包含以下几种类别:纯Dart库(Dartpackages)用Dart编写的传统package,比如path。其中一些可能包含Flutter的特定功能,因此依赖于Flutter框架,其使用范围仅限于Flu......
  • 点击事件不生效选择不到,元素被遮挡点击不起作用
    解决方案:两种方案:假设:外层遮挡的类名为:outer,被遮挡的类名为:Inner。1:在不破坏原有样式的基础上增加position:relative;然后z-index控制谁在上面即可.outer{ position:relative;z-index:1;}.Inner{ position:relative;z-index:2;}2.如果点击事件还不......
  • Flutter——最详细(Badge)使用教程
    背景主要常用于组件叠加上圆点提示;使用场景,消息数量提示,消息红点提示属性作用backgroundColor红点背景色smallSize设置红点大小isLabelVisible是否显示offset设置红点位置alignment设置红点位置child设置底部组件代码块classBadgePageextendsStatelessWidget{......
  • 不实用iframe,CSS媒体查询依旧生效
    这段SCSS代码定义了用于处理响应式设计和媒体查询的功能和混合器。以下是对这段代码的逐行解释:```scss$mediaMinWidth:1024px;```定义了一个变量`$mediaMinWidth`,其值为1024像素。```scss@functiontranslate-media-condition($c){$condMap:("screen":"......
  • flutter项目正式打包上线
    正式打包修改应用版本以及升级打包 ......
  • flutter 打开设置页面
    if(status.isPermanentlyDenied){//如果用户已永久拒绝了定位权限,您可以引导用户到应用设置页面以手动启用权限//如果用户已永久拒绝了定位权限,您可以引导用户到应用设置页面以手动启用权限//constintent=AndroidIntent(//action:'and......