Question

在我的fluttr应用程序中，我想在同一行的左侧显示一个文本，在右侧显示一个按钮。我给出了正确的对齐方式，但仍然没有成功，有人可以让我知道我在哪里犯错了，下面是代码

Widget build(BuildContext context) {
  return Scaffold(body:SingleChildScrollView(
        child:  Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 80.0,
          ),
          child: Container(
     child: Row(children: <Widget>[
        new Container(
          alignment: Alignment.topLeft,
          child: Align(
            child: Text(
              'Filters',
              style: const TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black54),
            ),
          ),
        ),
        Container(
            alignment: Alignment.topRight,
            child: OutlineButton(
              child: Text(
                'Reset',
                style: const TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black54),
              ),
              onPressed: null,
            )),
      ]),
  ))));
  }

代码输出

如何在屏幕左侧对齐过滤器，在屏幕右侧对齐重置按钮？

谢谢

Answer 1

获取方式的一对：

1>在mainAxisAlignment: MainAxisAlignment.spaceBetween,中使用Row()

OR

2>在小部件之间使用Spacer()小部件。

代码：

Row(
                    //  mainAxisAlignment: MainAxisAlignment.spaceBetween,  //  first way
                      children: <Widget>[
                    new Container(
                      alignment: Alignment.topLeft,
                      child: Align(
                        child: Text(
                          'Filters',
                          style: const TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.black54),
                        ),
                      ),
                    ),
                    Spacer(),  // second way
                    Container(
                        alignment: Alignment.topRight,
                        child: OutlineButton(
                          child: Text(
                            'Reset',
                            style: const TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black54),
                          ),
                          onPressed: null,
                        )),
                  ])

Answer 2

Row{
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:<Widget>[
  Text('Left Text'),
  OutlineButton(
   child:Text('Right Button',),
  ),
]}

这应该满足您的要求

Answer 3

您可以通过为行提供轴对齐来实现。

这会将项目放在行的两端

Row{
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children:<Widget>[
  Text('Left Text'),
  OutlineButton(
   child:Text('Right Button',),
  ),
]}

我建议阅读这篇文章，以全面了解布局如何在[[https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041][1]

在颤动的行内对齐文本

3 个答案: