开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在flutter AlertDialog中按钮未对齐到中心

在Flutter中，AlertDialog是一个常用的弹窗组件，它可以用于显示一些提示信息或者需要用户确认的操作。当在AlertDialog中的按钮未对齐到中心时，可以通过以下方式解决：

使用ButtonBar组件：ButtonBar是一个容器组件，它可以自动为子组件水平排列，并且对齐到中心。将按钮放置在ButtonBar中，可以解决按钮未对齐到中心的问题。

AlertDialog(
  title: Text('提示'),
  content: Text('是否确认该操作？'),
  actions: <Widget>[
    ButtonBar(
      children: <Widget>[
        FlatButton(
          child: Text('取消'),
          onPressed: () {
            // 取消操作
          },
        ),
        FlatButton(
          child: Text('确认'),
          onPressed: () {
            // 确认操作
          },
        ),
      ],
    ),
  ],
)

使用Row和Expanded组件：将按钮放置在一个Row组件中，并使用Expanded组件来占据剩余空间，可以实现按钮在水平方向上的对齐。

AlertDialog(
  title: Text('提示'),
  content: Text('是否确认该操作？'),
  actions: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: FlatButton(
            child: Text('取消'),
            onPressed: () {
              // 取消操作
            },
          ),
        ),
        Expanded(
          child: FlatButton(
            child: Text('确认'),
            onPressed: () {
              // 确认操作
            },
          ),
        ),
      ],
    ),
  ],
)

以上两种方法都可以解决按钮未对齐到中心的问题，具体选择哪种方式取决于项目的实际需求和个人喜好。

【参考腾讯云产品】腾讯云提供了云计算相关的服务和产品，包括云服务器、云数据库、云存储等，您可以根据具体需求选择适合的产品。

腾讯云产品介绍链接地址：https://cloud.tencent.com/product

请注意，本答案仅供参考，具体实现方法可能会因个人项目需求和技术栈而异。

相关搜索:Flutter CupertinoContextMenu动作按钮未居中对齐在AlertDialog中禁用正按钮在颤动中对齐中心在颤动中将按钮与底部中心对齐尝试在我页面的中心对齐html按钮在Flutter Google Map中自定义中心位置按钮按钮未与div中的图像对齐在flutter中的堆栈小部件上使用AlertDialog 如何在Flutter中对齐小部件中的按钮在Bootstrap网格中心水平对齐堆叠的单选按钮尝试在中心的div中对齐内容 flutter中的下拉按钮:值未编译文本对齐:在<a>中居中未正确对齐文本如何在flutter中将列中的按钮并排对齐？在列中对齐链接/按钮在React Native中对齐按钮 div中的两个按钮未对齐在Kotlin中单击肯定按钮后停止关闭AlertDialog 按钮在Firefox中右对齐，但在Chrome中不对齐在TextField Flutter中垂直居中对齐文本

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

文本、图片和按钮在Flutter中怎么用

面对这样的需求，在Android中，我们使用 SpannableString来实现；在iOS中，我们使用NSAttributedString来实现；而在Flutter中国也有类似的概念，即TextSpan...图片的显示方式有很多，比如资源图片、网络图片、文件图片等，图片格式也各不相同，因此在Flutter中，也有多种方式用来加载不同形式、支持不同格式的图片：加载本地资源图片，如： Image.asset...这，和Android中的ImageView、iOS中的UIImageView的属性都是类似的，我在Flutter的图片组件这篇文章中有做详细介绍。...既然是按钮，因此除了控制基本样式之外，还需要响应用户点击行为。这就对应着按钮控件中两个最重要的参数了： onPressed 参数用于设置点击回调，告诉Flutter在按钮点击时通知我们。...与Text类似，按钮内部也有丰富的UI定制接口，可以满足开发者的需求。其实，在UI基本信息的表达上，Flutter的经典控件与原生iOS、Android系统提供的控件没有什么本质区别。

7.7K2 0

在 Flutter 中创建可拖动的浮动操作按钮

Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是，它不允许您拖动按钮。如果你想让它可拖动怎么办。...必须根据移动增量更新按钮的偏移量。一个浮动的动作按钮通常可以在点击时执行一个动作，所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...通常，所需的行为是onPressed仅在点击按钮时调用回调，而不是在拖动结束时调用。然而，当拖动结束时，指针向上事件也会被触发。作为解决方案，我们需要跟踪按钮是否被拖动。...一个简单的圆形小部件作为child参数传递，这意味着它成为可拖动的按钮。您可以为按钮使用任何小部件，包括 Flutter 的FloatingActionButton小部件。...中创建可拖动的浮动操作按钮。

5.7K1 0

Flutter中的操作提示

在前面的文章中我们学习了Flutter中输入以及选择控件的用法，借助于这些组件大家可以完成很多常用的功能，但是他不能及时在用户操作后完成相应的界面提示，所以今天我们就会来看下Flutter中的操作提示。...在原生客户端有着几种常用的用户提醒方式，如Dialog、Snackbar、BottomSheet等，今天我们就来介绍下Flutter中几种常用的提醒方式。...Dialog ---- 对话框在Ios和Android客户端中都很常见，在Flutter中常用的AlertDialog、SimpleDialog和AboutDialog。...在Flutter中你可以使用ShowDialog方法来显示这些Dialog。...Icons.android,color: Colors.blueAccent,), children: [new Text("更新摘要\n新增飞天遁地功能\n优化用户体验")], )); } 每当我们点击屏幕中心按钮则会弹出如下

2.1K3 0

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )

// Text 文本组件 // textStyle 是之前创建的 TextStyle textStyle 对象 Text('Container 中的...对话框组件 ---- AlertDialog 对话框组件 , 可设置标题 , 内容 , 等一系列对话框相关的设置 , 下面代码是 AlertDialog 的构造函数源码 ; class AlertDialog...AlertDialog( // 对话框标题 title: Text("AlertDialog 对话框标题"),...官网 : https://flutter.dev/ Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

2K0 0

Flutter 实现刮刮卡效果

在这个博客，我们将探讨 Flutter 中刮刮卡效果。我们将了解如何在flutter应用程序中使用scratcher包实现刮板卡。...该演示视频演示了如何在Flutter中创建刮刮卡。它显示了刮卡将如何工作使用scratcher在Flutter应用程序包。它显示打开的对话框，然后显示刮刮卡，您将获得收入。它会显示在您的设备上。...在此屏幕中，我们将创建一个Container，并将对齐方式设置为中心。内部子属性添加一个**FlatButton。...在FlatButton中，我们将添加文本，颜色，形状，填充和onPressed（）方法。我们将添加一个scratchDialog（context）**函数。...在标题中，我们将在中心添加一个列小部件和对齐方式。在该列内，我们将添加文本和一个分隔符。

5.3K2 0

Flutter学习指南：编写第一个应用

从 React Native 到 Flutter，开发者对跨平台解决方案的探索从未停止，毕竟，它可以让我们节省移动端一半的人力。...本篇文章中，我们就通过编写一个简单的 Flutter 来了解他的开发流程。这里我们要开发的 demo 很简单，只是在屏幕中间放一个按钮，点击的时候，模拟摇两个骰子并弹窗显示结果。...在 Flutter 里，所有的东西都是 Widget。...具体一点说，在 Android 设备里，我们点击 // recent 按钮打开最近应用列表的时候，显示的就是这个 title。...查看最终的项目，可以 checkout 到 tag first_app_signing。恭喜你，第一个 Flutter 应用完成啦。

1.1K0 0

Flutter Text（文本控件）

Flutter中的Text相当于Android中的TextView，用于展示文本。...textAlign属性值含义 TextAlign.left 居左对齐 TextAlign.right 居右对齐 TextAlign.center 居中对齐 TextAlign.justify 两端对齐...TextAlign.start 向开始位置对齐 TextAlign.end 向结束位置对齐示例： new Text( " 对齐方式：向右对齐 TextAlign.right...showDialog(context: context, child: alert); }), ) 3、综合示例 import 'package:flutter.../gestures.dart'; import 'package:flutter/material.dart'; class TextDemo extends StatelessWidget {

5.1K4 0

【Flutter 专题】60 图解基本 Dialog 对话框小结

Dialog 在日常开发中应用广泛，大家也对此很熟悉；和尚以前也整理过关于自定义 Dialog 的小博客，今天和尚系统的学习一下最基本的 Dialog； Dialog 一般不直接使用，Flutter...20.0, 24.0, 24.0), // 消息内容与周围边距 this.contentTextStyle, // 消息内容样式 this.actions, // 操作按钮组合...CircleBorder 圆形背景效果时以宽高较小的尺寸为直径； c. actions 按钮个数最多可设置三个； showDialog(context: context, builder: (...UnconstrainedBox + SizedBox Flutter 的对话框中均未提供更改宽度的属性，高度可以自适应；和尚采用 UnconstrainedBox + SizedBox 可以实现对话框的宽度更改...：由底部弹出且透明度由 0.0 到 1.0；测试 barrierColor 进入和退出时都是渐变符合动画效果，与采用 Navigator 打开页面动画方式不同； showGeneralDialog(context

3.4K5 1

Flutter 入门指北之弹窗和提示（干货）

前面的小节把常用的一些部件都介绍了，这节介绍下 Flutter 中的一些操作提示。...Flutter 中的操作提示主要有这么几种 SnackBar、BottomSheet、Dialog，因为 Dialog 样式比较多，放最后讲好了 SnackBar SnackBar 的源码相对简单 const...在 ListView 中增加一个 BottomSheet 的按钮，因为 BottomSheet 需要的 context 也不能是 Scaffold 下的 context，所以需要通过 Builder 进行包裹一层...AlertDialog 在 ListView 中增加一个 AlertDialog 的按钮，用于点击显示 AlertDialog 用，然后加入显示 AlertDilaog 的方法，并将按钮的 onPressed...我们还是一样在列表加个按钮，并指向显示 AboutDialog 的事件。

2.3K2 0

【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

extends State { @override Widget build(BuildContext context) { return Container(); } } 在光标停留位置...组件 | Card 组件 | AlertDialog 组件 ) 的 build 方法 , 修改标题为 " " , 完整代码如下 : import 'package:flutter/material.dart...CloseButton(), // 返回按钮 BackButton(), // Chip..."AlertDialog 对话框标题"), // 对话框内容 content: Text("AlertDialog 对话框内容"),...flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab : https://codelabs.flutter-io.cn

2K0 1

基于flutter3.x+material-design3仿微信App应用实战

flutter3已经支持全终端项目开发，可编译到android/ios/windows/macos/linux/web等多个平台。...网址预览组件：url_launcher^6.2.4项目结构使用flutter create flutter_chat命令创建项目，生成的多端结构如下：在开始开发之前，需要先配置好相应的开发环境。...horizontal: 30.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0), // 自定义按钮渐变色...渐变色导航条在flutter中Appbar组件background属性只能单纯设置颜色，不能设置渐变背景。...: [ Icon(Icons.info, color: Colors.white,), Text('未识别到文字

1.1K1 0

Flutter入门指南

在安装过程中，请确保安装Flutter和Dart插件。配置iOS开发环境（可选）：如果你打算开发iOS应用，需要在macOS上安装Xcode，并配置相关的环境。...验证环境搭建：在命令行中运行flutter doctor，确保所有组件都已正确安装。...二、基本概念在开始编写Flutter应用之前，我们需要了解一些基本概念： Widgets：Flutter中的一切都是Widget（部件）。Widget是构建UI的基本元素，例如文本、按钮、布局等。...BuildContext：在Widget树中，BuildContext表示Widget的位置。它是一个关键概念，用于在Widget树中查找数据和传递数据。...Studio中，选择一个模拟器或连接一个真实设备，然后点击运行按钮。

1291 0

6详解AppBar小部件

它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。...在本教程中，我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。以下是我们将介绍的内容： Flutter 中的 AppBar 是什么？...Scaffold( appBar: AppBar(), ), 应用栏布局在Flutter中，AppBar的布局主要包括三个组成部分：leading，title，和actions。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。...关于 Flutter 的 AppBar 必须提供的所有内容的完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序中创建漂亮的 AppBars。

16.4K1 0

Flutter 中的Dialog

在Flutter中，各种提示框、弹出框是如何实现的呢？今天我们就来聊一聊这个问题。首先咱们来聊聊Flutter系统内置的Dialog。...Flutter系统内置的Dialog 关于Flutter系统内置的Dialog，我们可以从两个层面去讨论，一个是showDialog层面，一个是showModalBottomSheet层面。...需要注意的是，上面的代码中，我们在对应的Button中单独地响应了点击事件，其实我们也可以对Dialog内部的按钮点击事件进行统一处理的。...}, ) ], ); }); //在这里根据result值来进行判断、处理各种事件 print(result); } 在删除列表中的某一个项目的时候...和SimpleDialog，都是在showDialog中的builder函数中返回的，我们自定义的Dialog也是在这个函数中返回。

4.2K3 0

Flutter的生命周期

当 StatefulWidget 组件插入到组件树中时「createState」函数由「Framework」调用，此函数在树中给定的位置为此组件创建「State」，如果在组件树的不同位置都插入了此组件...(title: Text('AlertDialog'),); }); }); } ❝注意：弹出 AlertDialog 在 didChangeDependencies 中调用也会出现异常，...生命周期六：deactivate 当框架从树中移除此 State 对象时将会调用此方法，在某些情况下，框架将重新插入 State 对象到树的其他位置（例如，如果包含该树的子树 State 对象从树中的一个位置移植到另一位置...因为如果当前组件未插入到树中或者已经从树中移除时，调用「setState」会抛出异常，加上「mounted」判断，则表示当前组件在树中。...在iOS上，打电话、响应TouchID请求、进入应用程序切换器或控制中心都处于此状态。在Android上，分屏应用，打电话，弹出系统对话框或其他窗口等。

1.7K3 0

Flutter TextField（输入控件）

TextField右下角有一个输入数量的统计字符串 maxLines 最大行数 autocorrect 是否自动更正 autofocus 是否自动对焦 obscureText 是否是密码 textAlign 文本对齐方式...autofocus: true,//是否自动对焦 obscureText: true,//是否是密码 textAlign: TextAlign.center,//文本对齐方式...4、登录示例 import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class TextFieldDemo...TextCapitalization.characters 大写句子中的所有字符。 TextCapitalization.words 将每个单词的首字母大写。...TextField( textCapitalization: TextCapitalization.sentences, ), 5.3 更改TextField中的光标

3.4K2 0

Flutter实战 | 从 0 搭建「网易云音乐」APP（八、我的页面）

、发现页）3.Flutter实战 | 从 0 搭建「网易云音乐」APP（三、每日推荐、推荐歌单）4.Flutter实战 | 从 0 搭建「网易云音乐」APP（四、排行榜、播放页面）5.Flutter实战...中，这样方便操作。...而且在展开/收回的时候箭头要来回的变化，我在前面也写过一篇文章：Flutter | 求求你们了，切换 Widget 的时候加上动画吧，这个时候就派上用场了。...， AlertDialog 本身就有一个 shape 字段，可以用来控制外观，这里我们加上圆角就可以了。...剩下的还有一点就是「提交」按钮的颜色问题，当我们没有写歌单标题的时候，「提交」按钮要置灰，这里有一个小窍门就是如果 FlatButton 的 onPressed 为 null，那么这个按钮的颜色就是灰色的

1.5K0 0

【Flutter 专题】09 页面间小跳转 (一)

和尚最近在抽时间学习 Flutter，从零开始，一步一步走的都很艰难，前几天搭了一个基本的【登录】页面，现在学习下一步，页面之间的跳转；今天和尚整理一下 Flutter 测试过程中常用的页面跳转方式...但和尚了解到，Flutter 中跳转一定要用到 Navigator，就像是 Android 中的 Intent；和尚理解为就是一个栈，进进出出跟 Android 是很类似的，而 Flutter 也很直接...中静态注册；而 Flutter 中的 => 方法很像 Kotlin 中的 -> 减少代码行。...Navigator.pop(context); 会出现半个黑屏情况，所以和尚并不建议这种方式销毁页面，但是点击返回按钮是正常的。...第二个参数为静态注册的跳转页面名称；如： onPressed: () { Navigator.popAndPushNamed(context, 'forgetPwdRoute'); } ---- Tips: 和尚建议在使用返回值时

1.2K3 1

Flutter UI原理

例如，要将Widget居中，请将其包含在 Center Widegt中。有填充，对齐，行，列和网格的Widget。这些布局Widget没有自己的可视化表示。...2、Layer层级 3、Widget与Element 在Flutter中，Widget的功能是“描述一个UI元素的配置数据”，它就是说，Widget其实并不是表示最终绘制在设备屏幕上的显示元素，而只是显示元素的一个配置数据...列和行小部件使我们可以轻松地将其他小部件垂直或水平对齐。 Paiting绘画：例如。文本和图像小部件允许我们在屏幕上显示（“绘制”）一些内容。 Hit-Testing：例如。...例如，您可以在Container中构建一个按钮，将其包装到GestureDetector中以检测按钮被按下的动作。...4、Material & Cupertino 最上面一层包含了Material设计规范中的预构建元素(比如AlertDialog，Switch和FloatingActionButton)和一些重新创建的

3.4K2 0

Flutter 构建一个 todo list 应用

我们告诉 flutter 一个 todo 项应该包含什么，什么字段是必须的。在我们的案例中，我们有名字和 checked 两个状态属性。...在上面代码片段中，通过 map 方法返回每个元素的 TodoItem。然后，在应用的底部，我们定义了一个按钮。当按钮被点击时候，将调用 _displayDialog 方法。...在 _TodoListState 中创建 _displayDialog。...中的 Future 表明在将来的某个时候将返回潜在的值或者错误信息。...在我们的案例中，将会返回用户输入的值。对话框中有一个动作，就是当我们点击按钮的时候，将会关闭对话框并且调用 _addTodoItem 函数。

1.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭