首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

水平模式下的颤动ButtonBar似乎不尊重MainAxisSize

在Flutter中,ButtonBar 是一个常用的组件,用于在屏幕底部显示一组按钮。MainAxisSizeFlex 组件的一个属性,用于控制子组件在主轴方向上的尺寸。当你在水平模式下使用 ButtonBar 并且发现它不尊重 MainAxisSize 时,可能是由于以下几个原因:

基础概念

  1. ButtonBar: 是一个用于显示一组按钮的容器。
  2. MainAxisSize: 控制 Flex 组件在主轴方向上的尺寸。MainAxisSize.min 表示尽可能小,而 MainAxisSize.max 表示尽可能大。

可能的原因

  1. 默认行为: ButtonBar 默认情况下可能会忽略 MainAxisSize 的设置。
  2. 布局约束: 父组件的布局约束可能影响了 ButtonBar 的行为。

解决方案

为了确保 ButtonBar 尊重 MainAxisSize,可以尝试以下几种方法:

方法一:使用 Expanded 包裹 ButtonBar

通过将 ButtonBar 放在一个 Expanded 组件中,可以强制它在主轴方向上扩展到最大尺寸。

代码语言:txt
复制
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ButtonBar Example')),
        body: Center(
          child: ButtonBar(
            mainAxisSize: MainAxisSize.max,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Button 1')),
              ElevatedButton(onPressed: () {}, child: Text('Button 2')),
              ElevatedButton(onPressed: () {}, child: Text('Button 3')),
            ],
          ),
        ),
      ),
    );
  }
}

方法二:使用 Flex 包裹 ButtonBar

通过将 ButtonBar 放在一个 Flex 组件中,并设置 MainAxisSize,可以更明确地控制其尺寸。

代码语言:txt
复制
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ButtonBar Example')),
        body: Center(
          child: Flex(
            mainAxisSize: MainAxisSize.max,
            direction: Axis.horizontal,
            children: [
              ButtonBar(
                mainAxisSize: MainAxisSize.max,
                children: [
                  ElevatedButton(onPressed: () {}, child: Text('Button 1')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 2')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 3')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

应用场景

  • 底部导航栏: 在移动应用中,底部导航栏通常使用 ButtonBar 来实现。
  • 表单提交按钮: 在表单页面中,底部的提交按钮组可以使用 ButtonBar 来布局。

优势

  • 简洁性: ButtonBar 提供了一种简洁的方式来布局一组按钮。
  • 灵活性: 可以通过不同的布局方式(如 ExpandedFlex)来控制按钮的尺寸和位置。

通过上述方法,你应该能够解决 ButtonBar 不尊重 MainAxisSize 的问题。如果问题仍然存在,建议检查父组件的布局约束,确保它们不会影响 ButtonBar 的行为。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Flutter 专题】128 图解 ColorTween 颜色补间动画 & ButtonBar 按钮容器

和尚在尝试做主题颜色切换时,希望背景色有一个自然的过渡过程,于是了解到 ColorTween 颜色补间差值器,配合 AnimationController 实现两种颜色间的自然过渡;和尚简单尝试一下...ButtonBar 和尚在很多场景中设置水平均分或右对齐,为此和尚了解到一个新的容器方式,ButtonBar 默认水平方式放置子 Widget 当水平宽度无法完全放置所有子 Widget 时会竖直方向放置...,和尚简单学习一下; 源码分析 const ButtonBar({ Key key, this.alignment, // 对齐方式 this.mainAxisSize...的 _ButtonBarRow; 案例尝试 构造方法 ButtonBar 作为一个 Widget 容器,用于水平存放各 Widget,若子 Widget 占据空间范围大于分配空间时,则竖直方向展示;...1. alignment alignment 为容器内子 Widget 的对齐方式,不设置或为 null 时默认为 end 方式对齐,此时与 ltr / rtl 相关; _buttonBarWid01

72320

Flutter第4天--基础控件(下)+Flex布局详解

图片的颜色混合模式.png 重复模式,脑子想想也就知道了,这里就不演示了 ---- 1.4:使用Image的方法加载图片 这个等到文件读取再提一下,基本字段和Image是一样的,所以不用担心。...: const ButtonBar({ Key key, this.alignment = MainAxisAlignment.end, this.mainAxisSize =...,百度了一下,已经有人填坑了, //需要Scaffold的context,而不是我认为的那个context var scContext;//先声明一下Scaffold的context @...水平时主轴的布局行为.png ---- 4.水平时交错轴(纵轴)的布局行为:默认:CrossAxisAlignment.center ?...水平时交错轴的布局行为.png ---- 5.Flex盒主轴尺寸:mainAxisSize--默认:MainAxisSize.max 就两个值有啥好怕的,max已经测试完了,就剩一个min了 这min

2.2K30
  • 你知道吗,Flutter内置了10多种Button控件

    : (){ }, ) 效果: [1240] onPressed为null或不设置时,按钮是禁用状态。...highlightColor 高亮颜色,按下时的颜色 splashColor 水波纹颜色,按下松开会有水波纹效果 以textColor为例,用法如下: RaisedButton...用法如下: CloseButton() 效果如下: [1240] ButtonBar ButtonBar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列...RaisedButton(), ], ) 效果如下: [1240] 设置主轴的对齐方式及主轴的尺寸: ButtonBar( alignment: MainAxisAlignment.center..., mainAxisSize: MainAxisSize.max, ... ) 效果如下: ToggleButtons ToggleButtons组件将多个组件组合在一起,并让用户从中选择,ToggleButtons

    2.6K00

    你知道吗,Flutter内置了10多种Button控件

    onPressed为null或不设置时,按钮是禁用状态。...禁用状态下背景颜色 highlightColor 高亮颜色,按下时的颜色 splashColor 水波纹颜色,按下松开会有水波纹效果 以textColor为例,用法如下: RaisedButton(...默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下: DropdownButton( icon: Icon(Icons.add), iconSize: 24, iconDisabledColor...ButtonBar ButtonBar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。...设置主轴的对齐方式及主轴的尺寸: ButtonBar( alignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max,

    2.9K30

    Flutter动画之自定义动画组件-FlutterLayout

    前言: 本文将自定义一个FlutterWidget的动画组件,Flutter有颤动的意思 在此之前会讲一下AnimatedWidget与AnimatedBuilder是什么,如何使用 所以本文是一篇挺重要的文章...: MainAxisSize.min,); 使用_formChild批量生成单个文字,每个文字都加有抖动的光环,所以呈现每个字都抖动的效果 ---- 2.2:FlutterText的修改与封装...现在类名叫FlutterText有点不妥了,它包含一个孩子,可以让其中的孩子抖动,改名:FlutterLayout 那现在想让每个文字都抖一下,每次都写这么多也不爽,所以可以单独封装一下 这里FlutterText...在build方法里生成刚才的带有颤动效果的组件 ?...不,才刚刚开始。 ---- 2.升级FlutterLayout的功能 ?

    2K20

    Flutter布局基础——Column竖直布局

    : 从右到左 verticalDirection: 子视图竖直布局方向 VerticalDirection.down: 从上到下,默认为这个 VerticalDirection.up: 从下到上 mainAxisSize...因为不设置时,显示的效果和CrossAxisAlignment.center一致,而且只设置textDirection并没有效果,感兴趣的可以自己验证一下试试。...需要注意的:一 当Column的子视图中,有Expanded或者Flexiable的子视图,而且这个Column Widget又放在了一个Column Widget或ListView 或其他不固定高度的...而如果嵌套了Column或者ListView或其他可滑动视图时,父视图的高度是不固定的,此时Expanded也就无法填充了。...需要注意的:二 和Row类似,当子视图内容超出了父视图区域时,Flutter在Debug模式下,会显示黄色的提示。效果如下: <!

    1.7K50

    【Flutter 专题】40 日常小问题小结 (一)

    和尚作为一个小学生在实际操作中遇到很多问题,相对比较常见,和尚来整理记录一下。...,右侧垂直两张小图,水平方向 1:1 均分,和尚用 Expanded 配合 flex 在嵌套权重时遇到如下问题,于是重新研究一下权重的使用; ?...尝试四: 如果最外层不设置高度时,则考虑根据需求使用带有宽高的 Widget,和尚需要展示图片,故直接用图片占位; 和尚主要想实现图片高度自适应,而宽度随屏幕比例占有,右侧两图正常为左图占位一半...扩展: Flexible 的 FlexFit 分两种,在嵌套权重时只可以用默认的 loose,在其他情况下,和尚测试差别不大;但和尚理解的官方说明:tight 模式是强制填补剩余空间,而 loose...模式可以填满剩余空间,也允许稍小不填满,非强制;相对 loose 使用范围更广。

    84431

    Flutter跨平台移动端开发丨Column、Row、Flex、Wrap、Flow、Stack

    textDirection是mainAxisAlignment的参考系 mainAxisSize :表示 Column 在水平方向占用的空间。...:表示水平方向子 widget 的布局顺序,默认为由左向右 verticalDirection:表示 Column 的纵轴对齐方式,默认为 VerticalDirection.down 从上到下 textBaseline...textDirection是mainAxisAlignment的参考系 mainAxisSize :表示 row 在水平方向占用的空间。...:表示水平方向子 widget 的布局顺序,默认为由左向右 verticalDirection:表示 row 的纵轴对齐方式,默认为 VerticalDirection.down 从上到下 textBaseline...:表示水平方向子 widget 的布局顺序,默认为由左向右 verticalDirection:表示 flex 的纵轴对齐方式,默认为 VerticalDirection.down 从上到下 textBaseline

    2K30

    Flutte部件目录-基本部件(一)

    如果该行的非弹性内容比该行(那些不包含在Expanded或Flexible部件中的)本身多,则该行被认为已经溢出。当一行溢出时,该行没有任何剩余空间Expanded和Flexible的子项。...Column部件不滚动(并且通常认为宁愿在列中有更多子项也不使用适合可用空间是错误的)。 如果您有一行小部件,并希望它们在空间不足的情况下能够滚动,请考虑使用ListView。...在这种情况下,确实存在无限的垂直空间(垂直滚动列表的整个点是允许垂直无限空间)。在这种情况下,通常值得研究内部列为什么应该有一个Expanded或Flexible的子部件:内部子部件应该是多大?...黄色和黑色的条纹横幅 当列的内容超过可用空间量时,列溢出,内容被剪辑。 在调试模式下,在溢出边缘处呈现黄色和黑色条纹条以指示问题,并在列下方显示一条消息,指出检测到多少溢出。...Column的宽度是子部件的最大宽度(这将始终满足传入的水平约束)。 列的高度由mainAxisSize属性确定。

    7.5K20

    第128期:Flutter的flex布局组件(row 和 column)

    Row 组件 这两个组件可以用来进行做flex布局,row可以用来做水平方向的布局,column可以用来进行垂直方向上的布局,这两个类都是基于web的flex布局模式实现的。...,textDirection这几个属性我们稍微用小拇指琢磨一下,其实他们都是枚举类型: start end center spaceAround spaceBetween stretch ......使用与步骤1中相同的垂直约束来布局剩余的每个子对象,但并不使用无边界的水平约束,而是使用基于步骤2中分配的空间量的水平约束。...如果mainAxisSize属性为mainAxisSize.max,则Row的宽度是传入约束的最大宽度。...设置Cloumn的高度。Cloumn的高度由mainAxisSize属性确定。如果mainAxisSize属性为mainAxisSize.max,则Column的高度为传入约束的最大高度。

    1.3K20

    Flutter | 布局组件

    ,默认为系统当前 Locale 环境的文本方向(中文,英语都是左往右,而阿拉伯是右往左) mainAxisSize:表示 Row 在主轴(水平)占用的空间,如 MainAxisSize.max 表示尽可能多的占用水平方向的空间...,此时无论子 Widget 占用多少空间,Row 的宽度始终等于水平方向的最大宽度; MainAxisSize.min 表示尽可能的少占用水平空间,当子 Widget 没有占满水平剩余空间,则 Row...的实际宽度等于所有的子组件占用的水平空间。...其实就相当于 Android 中的 match_parent 和 warp_parent mainAxisAlignment:表示子组件在 Row 所占水平空间的对齐方式,如果 mainAxisSize...,内容就是 Flutter 的商品 在 Container 中 制定了 宽高为 120,如果不指定 Container 的宽高,同时指定 widthFactor 和 heightFactor 为 2也可以达到相同的效果

    2.7K30

    Flutter 自定义列表以及本地图片引用

    前言 ---- 上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义...引用本地图片 ---- 我们没有使用到的我们暂时先不提,等后面慢慢补充进去,比如说网络图片的显示等等,我们现总结一下关于本地图片的使用,具体的我们需要下面几步: 1、创建文件导入资源...,我们一个一个的介绍一下先,最后就可以出来我们前面的我的页面的UI了。...2、Row 水平组件,首先一点是不管是我们现在说的Row还是我们后面说的 Column只能在继承与StatelessWidget或者StatefullWidget的Widget中使用。...3、Column 上面说的是水平的,那这个肯定就是竖直的了,其实它俩挺像的,也都是最基础的。

    1K50

    Flutter 视图布局(一)

    没关系那我们用传统一点的 x、y 来转换一下: 渲染 Row 是行,它是横向的,那么它的主轴是 x 轴,交叉轴是 y 轴。...调用获取有限的不可更改的数据列表的值就Ok,免去了输入字符串可能导致的字符不匹配的问题。...mainAxisSize mainAxisSize 也是比较简单的属性,从名字上来看就可以知道大概结果,主轴大小,意思就是这个属性控制着在 Row、Column 主轴方向上的大小。...用代码作为参考来看: 它只影响垂直方向的行为,对水平方向并无影响,即是影响 Row 的交叉(副)轴和 Column 的主轴。...其实在使用起来和 html 的标签逻辑还是大部分相似的,只不过这里将这些 widget 设计得更细,每个 widget 都负责固定的渲染结果或行为模式。

    2.6K61

    Flutter 的按钮,看这篇文章就够了

    在Flutter中,有很多的按钮组件,常见的有:FlatButton、RaisedButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton...首先来看一下按钮组件的属性: onPressed,必填参数,按下按钮时触发的回调,接收一个方法,传null值表示按钮禁用,会显示禁用相关样式 child,表示按钮展示状态的Widget,一般为一个文本组件...接下来我就来比较一下这三者的展示效果。...实际上,RaisedButton是立体效果的,而FlatButton是扁平化的平面效果;OutlineButton是边框按钮,对齐设置背景颜色是不起效果的。...4,floatingActionButton的 child 属性,我们一般是给其配置成Icon,不建议给其配置成其他组件。 接下来,我们来聊一聊如何实现闲鱼底部Tabbar上的凸起按钮的效果。

    9.8K31

    用Flutter构建漂亮的UI界面 – 基础组件篇

    无论是为了现在的技术尝鲜还是将来的潮流趋势,都9102年了,作为一个前端开发者,似乎没有理由不去尝试它。...通常情况下,我们可能会用到EdgeInsets的4种构造方法: EdgeInsets.all(value): 用于设置4个方向一样的值; EdgeInsets.only(left: val1, top:...): 用于设置水平/垂直方向上的值; EdgeInsets.fromLTRB(left, top, right, bottom): 按照左上右下的顺序设置4个方向的值。...这里有一点需要特别注意:由于Column组件次轴方向上(即水平)默认是居中对齐,所以水平方向上不会撑满其父容器,此时需要指定CrossAxisAlignment.stretch才可以。...它的可选值有MainAxisSize.min和MainAxisSize.max。由于其默认值都是MainAxisSize.max,所以主轴方向上默认大小都是尽可能撑满父容器的。

    2.7K20
    领券