时间戳

首页 > 解决方案 > 在颤动中对齐行内的文本

flutter - 在颤动中对齐行内的文本

问题描述

在我的fluttr App中，我想在同一行的左侧显示一个文本，并在右侧显示一个按钮。我给出了正确的对齐方式但仍然没有出现，任何人都可以让我知道我在哪里犯了错误，下面是代码

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,
            )),
      ]),
  ))));
  }

代码输出

这个

如何将过滤器对齐到屏幕的左侧和重置按钮到屏幕的右侧？

谢谢

标签： flutter

解决方案

几种获取方式：

1> mainAxisAlignment: MainAxisAlignment.spaceBetween,用于Row()

或者

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,
                        )),
                  ])

推荐阅读