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

Flutter:为ButtonBar中的两个按钮赋予相同的宽度,对于长文本具有动态高度

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它使用Dart语言编写,并且具有丰富的UI组件和工具,可以帮助开发者快速构建漂亮、高性能的移动应用程序。

在Flutter中,要为ButtonBar中的两个按钮赋予相同的宽度,可以使用Expanded组件。Expanded组件可以将子组件的宽度或高度扩展到可用空间的最大值。

以下是一个示例代码,演示如何使用Expanded组件为ButtonBar中的两个按钮赋予相同的宽度:

代码语言:txt
复制
ButtonBar(
  children: [
    Expanded(
      child: RaisedButton(
        onPressed: () {},
        child: Text('Button 1'),
      ),
    ),
    Expanded(
      child: RaisedButton(
        onPressed: () {},
        child: Text('Button 2'),
      ),
    ),
  ],
)

在这个示例中,我们使用了两个Expanded组件来包裹RaisedButton组件。这样,两个按钮就会平均分配可用空间的宽度,从而实现了相同的宽度。

对于长文本具有动态高度的情况,可以使用Flexible组件。Flexible组件可以根据可用空间的大小自动调整子组件的尺寸。

以下是一个示例代码,演示如何使用Flexible组件为ButtonBar中的两个按钮赋予动态高度:

代码语言:txt
复制
ButtonBar(
  children: [
    Flexible(
      child: RaisedButton(
        onPressed: () {},
        child: Text('Button 1'),
      ),
    ),
    Flexible(
      child: RaisedButton(
        onPressed: () {},
        child: Text('Button 2'),
      ),
    ),
  ],
)

在这个示例中,我们使用了两个Flexible组件来包裹RaisedButton组件。这样,按钮的高度会根据可用空间的大小进行自动调整,从而实现了动态高度。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云Flutter开发平台:https://cloud.tencent.com/product/flutter
  • 腾讯云移动应用开发服务:https://cloud.tencent.com/product/mad
  • 腾讯云移动推送服务:https://cloud.tencent.com/product/tpns
  • 腾讯云移动直播服务:https://cloud.tencent.com/product/mlvb
  • 腾讯云移动分析服务:https://cloud.tencent.com/product/mga

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

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

相关·内容

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

我在之前文章文本、图片和按钮Flutter怎么用,简单介绍过按钮组件,本篇文章来详细聊聊Flutter各种按钮组件各种应用场景。...在Flutter,有很多按钮组件,常见有:FlatButton、RaisedButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton...首先来看一下按钮组件属性: onPressed,必填参数,按下按钮时触发回调,接收一个方法,传null值表示按钮禁用,会显示禁用相关样式 child,表示按钮展示状态Widget,一般一个文本组件...textColor,文本颜色 color,按钮背景颜色 disabledColor,按钮禁用时背景颜色 disabledTextColor,按钮禁用时文本颜色 splashColor,点击按钮时水波纹颜色...final onPressed; //按钮点击回调 final double width; //按钮宽度 final double height; //按钮高度 @override

9.3K31

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

; ColorTween 源码分析 ColorTween 源码很简单,继承自 Tween 补间动画,与 Tween 相同,只是 begin 和 end 用 Color 替代;其中若需要透明状态,可以将...ButtonBar 和尚在很多场景设置水平均分或右对齐,为此和尚了解到一个新容器方式,ButtonBar 默认水平方式放置子 Widget 当水平宽度无法完全放置所有子 Widget 时会竖直方向放置..., // 主轴上占据空间范围 this.buttonTextTheme, // 按钮文本主题 this.buttonMinWidth, // 子按钮最小宽度...this.buttonHeight, // 子按钮高度 this.buttonPadding, // 子按钮内边距 this.buttonAlignedDropdown...4. buttonMinWidth & buttonHeight buttonMinWidth & buttonHeight 分别对应子 Widget 默认最小按钮宽度按钮高度; _buttonBarWid06

63720

基于 Flutter + 百度人工智能 开发出一款测颜值 App

Flutter 颜值大师 基于 Flutter + 百度人工智能 开发出一款测颜值 App。...渲染多个浮动按钮 正常情况下,一个页面,通过 floatingActionButton 选项,默认只能渲染一个浮动按钮。...使用第三方插件实现选择照片功能 一些特殊功能,可以在插件商店搜索对应插件,从而轻松实现,插件商店地址 https://pub.dev/flutter 在 pubspec.yaml dependencies...: import 'dart:io'; 在 lib/main.dart ,定义函数 choosePic 来实现选取照片功能: // 点击按钮,选择图片 // 形参 source 选取照片方式...,则不执行后续人脸检测业务逻辑 if (image == null) { return; } } 在浮动按钮 onPressed 事件处理函数,调用第 5 步定义 choosePic

2.6K20

基于 Flutter + 百度人工智能 开发出一款测颜值 App

Flutter 颜值大师 基于 Flutter + 百度人工智能 开发出一款测颜值 App。...渲染多个浮动按钮 正常情况下,一个页面,通过 floatingActionButton 选项,默认只能渲染一个浮动按钮。...使用第三方插件实现选择照片功能 一些特殊功能,可以在插件商店搜索对应插件,从而轻松实现,插件商店地址 https://pub.dev/flutter 在 pubspec.yaml dependencies... 'dart:io'; 在 lib/main.dart ,定义函数 choosePic 来实现选取照片功能: // 点击按钮,选择图片 // 形参 source 选取照片方式,有两种,分别为...,则不执行后续人脸检测业务逻辑   if (image == null) {     return;   } } 在浮动按钮 onPressed 事件处理函数,调用第 5 步定义 choosePic

2.4K30

Flutter你竟是这样布局

对于Flutter学习者来说,掌握Flutter布局行为,直接决定了开发者在布局时候是否能做到高效、快速开发,但是初学者面对茫茫多Widget以及各种无法预料布局行为,总是很难将心中所想,转化为...Limitations 由于上述布局规则,Flutter布局引擎具有一些重要限制: Widget只能在其父级赋予限制内决定其自身大小。 这意味着Widget通常不能具有所需任何大小。...赋予无限大小时,它向下传递约束最大宽度是100像素。....'), ) 屏幕将强制FittedBox与屏幕完全相同文本将根据宽度调整自有的宽度属性,字体属性等。...FittedBox允许文本尺寸任意大小,但在将文本告知FittedBox大小后,FittedBox缩放文本直到填满所有可用宽度。 Example 19 ?

2.3K20

Flutter 按钮组件

Flutter提供了丰富按钮组件可以让我们快速构建UI界面。 常见按钮组件如下: 1. RaisedButton :凸起按钮; 2. FlatButton :扁平化按钮; 3....FloatingActionButton:浮动按钮按钮组件常见属性: 1. onPressed 按下按钮时触发回调方法,必填参数,如果值 null 表示禁用按钮,会显示禁用相关样式; 2....值类型Widget; 3. textColor 文本颜色。值类型Colors; 4. color 按钮颜色。值类型Colors; 5. disabledColor 按钮禁用时颜色。...值类型Colors; 6. disabledTextColor 按钮禁用时文本颜色。值类型Colors; 7. splashColor 点击按钮时水波纹颜色。...值类型Colors; 8. highlightColor 长按按钮按钮颜色。值类型Colors; 9. elevation 阴影范围。

3.1K30

Web 技术:CSS最小和最大(宽度高度)知识点及优缺点

上已经收录,文章已分类,也整理了很多我文档,和教程资料。 通常,我们希望限制元素相对于其父元素宽度,同时使其具有动态性。因此,有一个基础宽度高度能力,使其扩展基础上,可用空间。...height 属性 除了最小和最大宽度属性外,我们还具有高度相同属性。...按钮 对于按钮最小值和最大值有不同用例,因为按钮组件有多种变体。考虑下面的图: ? 请注意,按钮 “Get” 宽度太小。 如果不设置最小宽度,则由于任何原因而没有文本时,情况可能会变得更糟。...结果min-height值被设置与内容一样。 考虑以下示例: ? 用红色表示文本应该在父文本裁剪。因为面板主体是一个flex项目,所以它min-height与它内容相等。...最大宽度/高度和视口单位流体比率 为了使比例容器能够根据视口大小进行响应缩放,引入了padding hack。 现在,我们可以通过组合CSS视口单位和最大宽度/高度来模仿相同行为。 ?

5.5K20

Flutter容器组件

,容器将包裹该子组件宽度高度。...Alignment(0.0, 3.0) 表示一个点,该点相对于矩形水平居中,垂直于矩形底部并低于矩形高度。 下图显示了X和Y图形 ?...FractionalOffsetSize偏移量,用于表示TextDirection.ltr文本左侧偏移量和TextDirection.rtl文本右侧偏移量,而无需了解当前文本方向。 ?...如我们之前所知,如果容器组件没有子代,它将自动填充屏幕上给定区域,并且由于我们具有最大宽度和最大高度,因此容器将仅填充最大宽度和最大高度。 让我们将“文本”组件添加到容器。...我们可以看到,容器没有包裹给定子元素高度宽度,它已填充到最大。 您也可以发送宽度高度作为参数。

1.9K20

Flutte部件目录-Material Components 顶

实现Material Design指南视觉,行为和运动丰富小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录更多小部件。...应用程序结构和导航 Scaffold Appbar 上面两个在基本部件已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...ButtonBar 按钮水平排列。 ? 输入和选择 TextField 触摸文本字段将放置光标并显示键盘。 TextField部件实现了这个组件。 ?...芯片代表小块复杂实体,如联系人。 ? Tooltip 工具提示提供文本标签可帮助解释按钮或其他用户界面操作功能。...布局 ListTile 单个固定高度行,通常包含一些文本以及前导或尾随图标。 ? Stepper 材质设计步骤部件,通过一系列步骤显示进度。 ? Divider 一个逻辑像素粗横线,两边都有填充。

9.4K40

Flutter布局指南之深入理解BoxConstraints

Flutter约束是对一个Widget宽度高度简单限制 这些限制是通过BoxConstraints对象指定。...这4个宽度高度属性可以有从0到double.infinity任何数值。double.infinity这个值意味着Widget可以有无限尺寸。 你可能会遇到有界和无界约束这两个术语。...当framework渲染MyApp时,它在布局过程中被赋予约束,迫使它填满整个屏幕。换句话说,MyApp被赋予了与屏幕宽度高度相等尺寸Tight约束。...在这里,Container从它父组件MaterialApp收到了关于屏幕尺寸Tight约束。因此,即使Container被声明为具有100像素特定宽度高度,它也被强迫填满整个屏幕。...Widget,例如,列父Widget对它设置了Unbounded约束,而这个column一个子Widget高度被设置double.infinity,即无界高度约束,那么Flutter将出错

2K20

Flutter 初学者必读高级布局规则

Widget:你好第一个子项,你宽度必须在 0 到 290 像素之间,高度在 0 到 75 像素之间。 第一个子项:好,那么我希望自己宽度是 290 像素,高度 20 像素。...1限制 因为上述布局规则关系,Flutter 布局引擎有一些重要限制: 一个 widget 只能在其父项赋予约束内决定其自身大小。这意味着 widget 往往 不能自由决定自己大小。...不幸是,在这个例子 Container 宽度 4000 像素,因为太大而无法容纳在 UnconstrainedBox ,因此 UnconstrainedBox 将显示让人胆战心惊“溢出警告”...LimitedBox 赋予一个无限大小时,后者将向自己子项传递 100 宽度上限。....'),) 屏幕强制 FittedBox 与屏幕大小完全相同。Text 将有一些自然宽度(也称为其固有宽度),该宽度取决于文本数量和字体大小等。

1.6K20

Flutter构建布局 顶

将第一行文本放入Container可以添加填充。 列第二个子项(也是文本)显示灰色。 标题行最后两项是一个红色星形图标和文字“41”。 将整行放在容器,并沿着每个边缘填充32像素。...第3步:实现按钮按钮部分包含3列,它们使用相同布局 - 一行文本图标。...将相当文本部分定义变量。...例如,要创建一个由三个小部件组成行,其中中间小部件宽度是其他两个小部件两倍,请将中间小部件弹性系数设置2: appBar: new AppBar( title: new Text(widget.title...在Flutter,一张卡片具有稍微圆润角落和阴影,使其具有3D效果。 更改卡片elevation属性可让您控制投影效果。

43K10

经典布局:如何定义子控件在父容器排版位置?

在之前文章,我们一起学习了构建视图基本元素,文本Text、图片Image和按钮,用于展示一组连续视图元素ListView,以及处理多重嵌套可滚动视图CustomScrollView,等等。...Flutter提供了31种布局Widget,对布局控件划分非常详细,一些相同(或相似)视觉效果可以通过多种布局控件实现,因此布局类型相比原生iOS、Android平台多了不少。...今天,我着重介绍几类在开发Flutter应用时,最常用也最具有代表性布局Widget,包括单子Widget布局、多子Widget布局、层叠Widget布局。...需要注意是,对于主轴而言,Flutter默认是让父容器决定其长度,即尽可能大。 在上例,Row宽度屏幕宽度,Column高度屏幕高度。...可以看到,我们设置了主轴大小MainAxisSize.min之后,Row宽度变得和其子Widget一样大,因此再设置主轴对齐方式也就不起作用了。

4.5K30

Flutter 专题】07 您搭好【登录】页面了么?

内容块包括一个应用 Logo,两个图标,两个输入框,一个按钮。 因此需要用到控件包括:图片,文本输入框,按钮,布局等。当然 Flutter 最大优势就是一切都是 widget。...,或是在文本输入框外添加一层 widget,和尚理解添加一层父布局,限制文本输入框宽度,如下: new Padding( padding: new EdgeInsets.fromLTRB(20.0...如何调整按钮宽度及效果? ? 解决如下: 1....Flutter 引用图片有四种方式,和尚认为目前用较多 网络图片 和 Assets 图片,引用网络图片方式也很简单,如下: new Image.network( 'http://XXX.jpg...对于文本输入框明文显示或密码显示,主要通过 obscureText: true, 属性,当该属性 true 时密码隐文展示; ? 3.

1.1K41

UITableView在Flutter是什么?

前面我们学习了文本、图片和按钮这些基本元素,这些基本元素需要进行排列组合,才能构成我们看到UI视图。...这样需求,在iOS是用UITableView实现;而在Flutter,实现这种需求则是列表控件ListView。...如下所示,我定义了一组不同颜色背景组件,将他们宽度设置140,并包在了水平布局ListView,让它们可以横向滚动: ListView( itemExtent: 140,//item...因为如果这个参数null,ListView会动态地根据子Widget创建完成结果,决定自身视图高度,以及子Widget在ListView相对位置。...对于两个问题,我们可以使用ScrollController进行滚动信息监听,以及相应滚动控制;而最后一个问题,则需要接收ScrollNotification通知进行滚动事件获取。

5.5K10
领券