Flutter:如何将内部按钮与外部按钮的左侧对齐

时间:2020-02-13 17:45:35

标签: flutter dart

我试图将内部的灰色Button放置在红色Button的内部,但是找不到将其与红色Button的左侧对齐的方法。

不好意思,我是扑朔迷离。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: MainApp(),
));

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.fromLTRB(50, 100, 50, 0),
        child: SizedBox(
          child: ButtonTheme(
            height: 70,
            child: FlatButton(
              child: SizedBox(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    ButtonTheme(
                      height: 70,
                      child: FlatButton(
                        child: Text(""),
                        shape: new RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(13.0),
                        ),
                        onPressed: () {},
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(13.0),
              ),
              onPressed: () {},
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

这就是即时消息,我试图摆脱内部按钮左侧的红色空间。

enter image description here

1 个答案:

答案 0 :(得分:1)

就像其他人指出的那样,我们不确定您在按钮内使用按钮的动机...。但是,如果出于某种原因实际上需要此按钮,则可以采用以下解决方案:

SizedBox(
  child: ButtonTheme(
    height: 70,
    child: FlatButton(
      padding: EdgeInsets.zero, // ADD THIS LINE
      child: SizedBox(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ButtonTheme(
              height: 70,
              child: FlatButton(
                child: Text(""),
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(13.0),
                ),
                onPressed: () {},
                color: Colors.grey,
              ),
            ),
          ],
        ),
      ),
      shape: new RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(13.0),
      ),
      onPressed: () {},
      color: Colors.red,
    ),
  ),
);

基本上,FlatButton()有一个padding参数,该参数用于控制您要参考的间距,以及灰色按钮上方和下方的0宽度空格以及右侧的等效空格按钮。传入EdgeInsets.zero可以确保按钮的内侧没有填充。

希望这会有所帮助