开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在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

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

相关搜索:div中的两个按钮未对齐 Flutter CupertinoContextMenu动作按钮未居中对齐 flutter中的下拉按钮:值未编译 ul在div中未正确对齐在AlertDialog中禁用正按钮在Bootstrap网格中心水平对齐堆叠的单选按钮在Flutter Google Map中自定义中心位置按钮在flutter中的堆栈小部件上使用AlertDialog 在Kotlin中单击肯定按钮后停止关闭AlertDialog 在React Native中对齐按钮

相关搜索:

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

有帮助

没帮助

相关·内容

文本、图片和按钮在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.5K1 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

1.9K0 0

Flutter 实现刮刮卡效果

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

5.2K2 0

Flutter质感设计之持久底部面板

import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { @override _MyApp createState...解释：联系上文，_scaffoldKey是Scaffold框架状态的唯一键，因此代码大意为，在Scaffold框架中显示持久性的质感设计底部面板 */ _scaffoldKey.currentState.showBottomSheet...控制的元素是新构建的质感设计底部面板，因此代码大意为，注册底部面板不再可见时调用的函数 */ .closed.whenComplete((){ // mounted：bool值，这个State对象当前是否在树中...：质感设计中的告警对话框 child: new AlertDialog( // content：对话框的可选内容，以浅色字体显示在对话框的中心 content: new Text('你点击了浮动按钮')..., // actions：显示在对话框底部的可选操作 actions: <Widget [ // FlatButton：质感设计中的平面按钮 new FlatButton( onPressed: ()

7363 1

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

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

9940 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 {

5K4 0

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.2K2 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

1.9K0 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

3K5 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('未识别到文字

6991 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.3K1 0

Flutter入门指南

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

821 0

flutter 输入框组件TextField的实现代码

相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。...* email: zhuoyuan93@gmail.com * */ import 'package:flutter/cupertino.dart'; import 'package:flutter...在逻辑上，每当我们点击下面的按钮都会判断用户名密码是否符合要求，并且使用控制器清空已经输入的用户名和密码。...可以看到，我先添加了一个decoration属性. decoration属性介绍: border：增加一个边框， hintText：未输入文字时，输入框中的提示文字， prefixIcon：输入框内侧左面的控件..., 在第一个输入框的onEditingComplete方法中是用 FocusScope.of(context).requestFocus(secondTextFieldNode), 方法来让第二个输入框请求获取焦点

4.7K1 1

Flutter的生命周期

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

1.6K3 0

Flutter 中的Dialog

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

4.1K3 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.3K2 0

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

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

1.4K0 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

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭