Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/dart/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Flutter 如何对齐扁平按钮的子级_Flutter_Dart_Flutter Layout - Fatal编程技术网

Flutter 如何对齐扁平按钮的子级

Flutter 如何对齐扁平按钮的子级,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,我试图将两个文本和一个图像作为一个平面按钮的子对象对齐,但不知何故,元素没有按照它们应该对齐的方式对齐 我尝试过使用堆栈、对齐、行等,但并没有真正成功(对于飞镖或颤振,我也是一个初学者) 新按钮主题( 最小宽度:171, 身高:176, 子容器:新容器( 装饰:新盒子装饰( 边界半径:新边界半径。圆形(19), 渐变:新的线性渐变( 开始:Alignment.centerLeft, 结束:对齐。中间右侧, 颜色:[ 颜色(0xFF8F94FB), 颜色(0xFF5D62D4) ] ) ), 孩子

我试图将两个文本和一个图像作为一个平面按钮的子对象对齐,但不知何故,元素没有按照它们应该对齐的方式对齐

我尝试过使用堆栈、对齐、行等,但并没有真正成功(对于飞镖或颤振,我也是一个初学者)

新按钮主题(
最小宽度:171,
身高:176,
子容器:新容器(
装饰:新盒子装饰(
边界半径:新边界半径。圆形(19),
渐变:新的线性渐变(
开始:Alignment.centerLeft,
结束:对齐。中间右侧,
颜色:[
颜色(0xFF8F94FB),
颜色(0xFF5D62D4)
]
)
),
孩子:扁平按钮(
onPressed:()=>handleButtonClick(),
形状:新的RoundedRectangleBorder(
边界半径:新边界半径。圆形(19)
),
子:新堆栈(
儿童:[
对齐(
对齐:对齐。左下角,
子项:Image.asset('assets/daily_icon.png',宽度:109,高度:109),
)
],
),
),
), 
),

结果如下:

您可以一步一步地调试。首先,这是我和其他同事开发人员使用的一种技术。在子参数中,传递一个
容器
,该容器将接收一种颜色,例如,
Colors.red
,通过该颜色,您可以看到容器区域包含的大小

在此之后,如果您希望将内容集中在此
容器中,将passa a
中心作为子级,以及此
中心
小部件的子级,则可以传递图像,并定义此图像的大小

child: Container(
        color: Colors.red,
        child: Center(
          child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
        ),
      ),

告诉我这是否适用于您。

用下面的代码替换您的FlatButton,看看它是否适用于您

     FlatButton(
                padding: const EdgeInsets.all(0),
                onPressed: () => {

                },
                shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(19)
                ),
                child: new Stack(
                  children: <Widget>[
                    Container(
                      width: 109,
                      height: 109,
                      child: Align(
                        alignment: Alignment.bottomLeft,
                        child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
                      ),
                    ),

                  ],
                ),
              ),
FlatButton(
填充:常量边集。全部(0),
按下:()=>{
},
形状:新的RoundedRectangleBorder(
边界半径:新边界半径。圆形(19)
),
子:新堆栈(
儿童:[
容器(
宽度:109,
身高:109,
子对象:对齐(
对齐:对齐。左下角,
子项:Image.asset('assets/demo.png',fit:BoxFit.fitHeight,),
),
),
],
),
),

尝试将padding:const edgetSet.all(0)添加到FlatButton谢谢。红色的技术是无价的!!哈哈,这是我在构建UI时的秘密,总是传递一种颜色以查看所有内容的位置。将填充设置为零解决了我的问题
     FlatButton(
                padding: const EdgeInsets.all(0),
                onPressed: () => {

                },
                shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(19)
                ),
                child: new Stack(
                  children: <Widget>[
                    Container(
                      width: 109,
                      height: 109,
                      child: Align(
                        alignment: Alignment.bottomLeft,
                        child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
                      ),
                    ),

                  ],
                ),
              ),