草庐IT

android - 对齐小部件内部在 flutter 中按行展开

coder 2023-07-22 原文

我试图在行内对齐小部件,但小部件自动对齐到中心。我想将两个小部件都对齐到行的顶部。

 Widget PlayerConnectWidget(double width,double height){
      return SingleChildScrollView(
          child: Container(

            margin: EdgeInsets.only(left: width*0.03,right: width*0.03,top: width*0.05),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Flexible(flex:1,fit:FlexFit.loose,child:MyFeedTile(),),
                    Flexible(flex:1,fit:FlexFit.loose,child:_logoContainer(width),),

                ],),
                SizedBox(height: width*0.02),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                   Expanded(flex: 7,child: Container(
                     margin: EdgeInsets.only(right: width*0.03),
                     padding: EdgeInsets.all(width*0.03),
                     decoration: BoxDecoration(color: Colors.white70,borderRadius: new BorderRadius.circular(12.0),),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: <Widget>[
                       Text('Venue'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Location'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Sports'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Opening Times'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Notes'),
                         new Divider(
                           color: Colors.black87,
                         ),
                     ],),

                   ),),
                    Expanded(flex: 3, child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                    //  mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[

                      //  SizedBox(height: width*0.02),
                        Container(
                          decoration: BoxDecoration(
                            color: MyColors.yellowBg,
                            borderRadius: new BorderRadius.circular(8.0),
                          ),
                          child:  FlatButton(
                              onPressed: (){
                              },
                              child: Text(
                                  'Message',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.0,

                                  )
                              )
                          ),),
                        SizedBox(height: width*0.02),
                        Container(
                          decoration: BoxDecoration(
                            color: MyColors.yellowBg,
                            borderRadius: new BorderRadius.circular(8.0),
                          ),
                          child:  FlatButton(
                              onPressed: (){
                              },
                              child: Text(
                                  'Continue',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.0,

                                  )
                              )
                          ),)
                      ],),)
                  ],)
              ],
            ),
          )
      );
    }


Widget _logoContainer(double width){
  return Container(
    margin: EdgeInsets.only(left:width*0.05),
    height: 110.0,
    width: 120.0,
    decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/cmp_click.png"),
          fit: BoxFit.fill,
        )
    ),
  );
}
Widget MyFeedTile(){
  return GestureDetector(
    onTap: (){
      Navigator.push(context, MaterialPageRoute(builder: (context) => FeedView()),);
    },
    child: Container(
      padding: EdgeInsets.only(top:width*0.02,bottom: width*0.02),
      decoration: BoxDecoration(
        color: MyColors.colorPrimaryDark,
        borderRadius: new BorderRadius.circular(12.0),

      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Expanded(flex: 3,
            child: Container(
              //decoration: BoxDecoration(color: Colors.green[100]),
              height: 50,
              width: 50,
              margin: EdgeInsets.all(width*0.01),
              child: CircleAvatar(
                radius: 50.0,
                backgroundImage:
                NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,),),

          ),
          Expanded(flex: 7,child: Container(
            //decoration: BoxDecoration(color: Colors.green[100]),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text('User name',style: TextStyle(color: Colors.white,fontFamily: 'bold'),),
                SizedBox(height: width*0.01),
                Text('Time',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
                SizedBox(height: width*0.01),
                Text('Location',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
                SizedBox(height: width*0.01),
                Text('Date',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
              ],),),)
        ],),

    ),);
}

我明白了

我正在努力实现这一目标

还有这个

最佳答案

您只需在代码中添加以下行:

crossAxisAlignment:CrossAxisAlignment.start

  Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,

关于android - 对齐小部件内部在 flutter 中按行展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56320608/

有关android - 对齐小部件内部在 flutter 中按行展开的更多相关文章

  1. ruby - 在 Ruby 中按名称传递函数 - 2

    如何在Ruby中按名称传递函数?(我使用Ruby才几个小时,所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁?我可以只

  2. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要,需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源,并重新打包,签名生成新的自定义的apk,下面我来介绍一下我的实现过程。APK修改,分为以下几步:反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机(针对系统自带apk,其他软件免root)3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了,直接进入主题:按键win+R输入cmd,打开命令窗口,并将路

  3. ruby-on-rails - 在具有 ActiveRecord 条件的相关模型中按字段排序 - 2

    我正在尝试按Rails相关模型中的字段进行排序。我研究的所有解决方案都没有解决如果相关模型被另一个参数过滤?元素模型classItem相关模型:classPriority我正在使用where子句检索项目:@items=Item.where('company_id=?andapproved=?',@company.id,true).all我需要按相关表格中的“位置”列进行排序。问题在于,在优先级模型中,一个项目可能会被多家公司列出。因此,这些职位取决于他们拥有的company_id。当我显示项目时,它是针对一个公司的,按公司内的职位排序。完成此任务的正确方法是什么?感谢您的帮助。PS-我

  4. ruby - 是否可以从也在该模块中的类内部调用模块函数 - 2

    在这段Ruby代码中:ModuleMClassC当我尝试运行时出现“'M:Module'的未定义方法'helper'”错误c=M::C.new("world")c.work但直接从另一个类调用M::helper("world")工作正常。类不能调用在定义它们的同一模块中定义的模块函数吗?除了将类移出模块外,还有其他解决方法吗? 最佳答案 为了调用M::helper,你需要将它定义为defself.helper;结束为了进行比较,请查看以下修改后的代码段中的helper和helper2moduleMclassC

  5. ruby - 无法安装 gem - make 未被识别为内部或外部命令可运行程序或批处理文件 - 2

    我想在Windows7上安装带有ruby​​1.9.3的rspec-railsgem。我收到一些错误消息,提示无法安装某些json库。所以,我使用下面的说明来解决它。来源=The'json'nativegemrequiresinstalledbuildtools从[rubyinstaller.org][3]下载[Ruby1.9.3][2]从[rubyinstaller.org][3]下载DevKit文件对于Ruby1.9.3,使用[DevKit-tdm-32-4.5.2-20110712-1620-sfx.exe][4]将DevKit解压到路径C:\Ruby193\DevKit运行cd

  6. ruby - 如何在 Ruby 中实现私有(private)内部类 - 2

    来自Java,我正在尝试在Ruby中实现LinkedList。我在Java中实现它的通常方法是有一个名为LinkedList的类和一个名为Node的私有(private)内部类,其中LinkedList的每个对象都作为Node对象。classLinkedListprivateclassNodeattr_accessor:val,:nextendend我不想将Node类暴露给外部世界。然而,通过Ruby中的这个设置,我可以使用这个访问LinkedList类之外的私有(private)Node类对象-node=LinkedList::Node.new我知道,在Ruby1.9中,我们可以使用

  7. ruby - Lisp 作为内部 Ruby DSL? - 2

    我已经能够找到:a)用Ruby编写的Lisp解释器(即外部DSL)http://onestepback.org/index.cgi/Tech/Ruby/LispInRuby.redb)作为RubyDSL的Prologhttp://www.kdedevelopers.org/node/2369c)讨论Ruby“作为”一个Lisphttp://www.randomhacks.net/articles/2005/12/03/why-ruby-is-an-acceptable-lisp但奇怪的是,我实际上找不到Lisp的“内部”实现,例如Prolog的实现。我只是不够谷歌,还是还没有人发表过这

  8. ruby - RVM screen 内部损坏 - 2

    我正在使用screen,甚至在rvm1.9.2之后并且有一个合适的.rvmrc我的服务器将仍然使用jruby。我的.screenrc包含shell#{SHELL}rvm信息显示jruby。好像rvm1.9.2没有任何效果,但它在screen外工作正常。 最佳答案 好的,我找到了solution.创建一个.screenrc文件并将此代码段放入其中:shell-$SHELLofficialinstructions省略破折号。 关于ruby-RVMscreen内部损坏,我们在StackOver

  9. ruby - 使用 YARD for Ruby 文档的内部评论? - 2

    我正在将我维护的ruby​​gem从RDoc切换到YARD文档。但是,代码中有一些关键注释只需要保留在代码中,不应出现在文档中。例如:###SomeClassdocumentationhere.#--#CRITICALcommentthatshouldbeinthecodebutnotinthedocumentation,#andmustbeatthisparticularspotinthecode.#++#moredocumentationthatfollowsthecriticalcommentblock,butthispart#shouldbeinthegenerateddocu

  10. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性:然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量:ANDROID_HOMED:\AndroidSDK2.然后在系统变量:Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量:        变量名:FLUTTER_STORAGE_BASE_URL      变量值:https://storage.flutter-io.cn        变量名:PUB_HOSTED_URL      变量

随机推荐