Question

基本上，顶部栏中显示了一排图标，如下图所示。我无法根据我的期望单独定位它们。

尝试使用“灵活和扩展”窗口小部件来填充中间的空白，但这不起作用。也许我做错了

我得到的：

我的期望：

我希望后退箭头图标最左对齐，开始对齐与标题文本一起开始。其余三个图标以均匀的间距对齐到末端。下面的标题是另一个Container窗口小部件，其中有一个子Column窗口小部件以显示Heading和Subheading。

忽略不透明度和流生成器

Widget _topMenuBar(BuildContext context){
   return Container(
      height: 30.0,
      color: Colors.green.shade700,
      padding: EdgeInsets.only(right: 20.0),
      margin: EdgeInsets.only(bottom: 10.0),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Flexible(
            flex: 6,
            child: Opacity(
                opacity: _opacityTween.evaluate(animation),
                child: FlatButton(
                  onPressed: () => Navigator.pop(context),
                  child: new Icon(
                      Icons.arrow_back,
                      color: Colors.white,
                      size: 24.0
                  )
                ),
              ),
          ),
          Flexible(
            flex: 1,
            child: StreamBuilder<bool>(
              stream: someFunction(),
              builder: (context, snapshot){
                if(snapshot.hasData && snapshot.data){
                  return Opacity(
                    opacity: _opacityTween.evaluate(animation),
                    child: IconButton(
                      onPressed: () => {doSomething()},
                      icon: Icon(
                          Icons.star,
                          color: Colors.white,
                          size: 24.0),

                    )
                  );
                }
                return Opacity(
                  opacity: _opacityTween.evaluate(animation),
                  child: IconButton(
                    onPressed: () => {doSomething()},
                    icon: Icon(
                        Icons.star_border,
                        color: Colors.white,
                        size: 24.0)
                  ),
                );
              },
            ),
          ),
          Flexible(
            flex: 1,
            child: Opacity(
              opacity: _opacityTween.evaluate(animation),
              child: IconButton(
                onPressed: () => {doSomething()},
                icon: new Icon(
                  Icons.share,
                  color: Colors.white,
                  size: 24.0
                )
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child:  Opacity(
              opacity: _opacityTween.evaluate(animation),
              child: IconButton(
                onPressed: () => print('more'),
                icon: new Icon(
                  Icons.more_vert,
                  color: Colors.white,
                  size: 24.0
                )
              ),
            ),
          )
        ],
      ),
    );

}

Answer 1

似乎您需要使所有四个IconButton彼此相同。 First Flexible使用FlatButton代替IconButton，其余3个都可以。

Flexible(
        flex: 6,
        child: Opacity(
            opacity: _opacityTween.evaluate(animation),
            child: ***FlatButton*** ====>>> ***IconButton***(
              onPressed: () => Navigator.pop(context),
              child: new Icon(
                  Icons.arrow_back,
                  color: Colors.white,
                  size: 24.0
              )
            ),
          ),
      ),

需要帮助为我的自定义顶部栏对齐图标

1 个答案: