【问题标题】:mainAxisAlignment not working to align iconButton to the topmainAxisAlignment 无法将 iconButton 对齐到顶部
【发布时间】:2020-06-05 02:50:13
【问题描述】:

正如您从照片中看到的那样,我有一个包含 3 列的行。

|iconButton|第 2 列文本字段|iconButton|

我无法让 iconButtons 正确对齐。我希望箭头按钮与相应列的顶部对齐。我希望 + 按钮位于相应列的底部。

 _scaffoldKey.currentState
    .showBottomSheet((context) {
      return new Container(
        height: 400.0,
        color: Colors.white,
        padding: const EdgeInsets.only(left: 2, right: 2),
        child: new Center(
          // child: new Text('Persistent Bottom Sheet'),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        IconButton(
                          icon: Icon(Icons.arrow_back),
                          color: Colors.black,
                          onPressed: () {},
                        ),
                      ],
                    ),
                    Expanded(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: Alignment.topCenter,
                              height: 35,
                              margin: const EdgeInsets.only(
                                  top: 45, left: 0, right: 20),
                              child: AutoCompleteTextView(
                                suggestionsApiFetchDelay: 300,
                                focusGained: () {},
                                onTapCallback: (_) async {

                                },
                                focusLost: () {

                                },
                                onValueChanged: (String text) {

                                },
                                controller: startEditingController,
                                suggestionStyle:
                                    Theme.of(context).textTheme.bodyText2,
                                getSuggestionsMethod:
                                    getLocationSuggestionsList,
                                tfTextAlign: TextAlign.left,
                                tfStyle: TextStyle(
                                  fontSize: 16,
                                  color: Theme.of(context)
                                      .textTheme
                                      .bodyText2
                                      .color,
                                ),
                                tfTextDecoration: InputDecoration(
                                  contentPadding:
                                      EdgeInsets.only(top: 0, left: 8.0),
                                  filled: true,
                                  fillColor: Colors.white,
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.grey[800],
                                        width: 1.0),
                                    borderRadius: BorderRadius.zero,
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.deepPurple[600],
                                        width: 1.0),
                                    borderRadius: BorderRadius.zero,
                                  ),
                                  hintText: "Current Location",
                                  labelText: 'Start',
                                  labelStyle: kcarPurpleLabelStyle,
                                ),
                              ),
                            ),
                            Container(
                              height: 35,
                              margin: const EdgeInsets.only(
                                  top: 5, left: 0, right: 0),
                              child: AutoCompleteTextView(
                                suggestionsApiFetchDelay: 300,
                                focusGained: () {},
                                onTapCallback: (_) async {

                                },
                                focusLost: () {

                                },
                                onValueChanged: (String text) {

                                },
                                controller: startEditingController,
                                suggestionStyle:
                                    Theme.of(context).textTheme.bodyText2,
                                getSuggestionsMethod:
                                    getLocationSuggestionsList,
                                tfTextAlign: TextAlign.left,
                                tfStyle: TextStyle(
                                  fontSize: 16,
                                  color: Theme.of(context)
                                      .textTheme
                                      .bodyText2
                                      .color,
                                ),
                                tfTextDecoration: InputDecoration(
                                  contentPadding:
                                      EdgeInsets.only(top: 0, left: 8.0),
                                  filled: true,
                                  fillColor: Colors.white,
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.grey[800],
                                        width: 1.0),
                                    borderRadius: BorderRadius.zero,
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.deepPurple[600],
                                        width: 1.0),
                                    borderRadius: BorderRadius.zero,
                                  ),
                                  hintText: "Current Location",
                                  labelText: 'Destination',
                                  labelStyle: kcarPurpleLabelStyle,
                                ),
                              ),
                            )
                          ]),
                    ),
                     Column(
                       crossAxisAlignment: CrossAxisAlignment.end,
                       mainAxisAlignment: MainAxisAlignment.end,
                       mainAxisSize: MainAxisSize.max,
                       children: [
                         Stack(alignment: Alignment.bottomLeft, children: [
                           IconButton(
                             icon: Icon(Icons.add),
                             color: Colors.black,
                             onPressed: () {},
                           ),
                         ]),
                       ],
                     ),
                  ]),
            ],
          ),
        ),
      );

【问题讨论】:

  • 这个问题解决了吗?
  • 不,它不是固定的。

标签: flutter dart


【解决方案1】:

实现此目的的一种方法是利用行和列小部件的 mainAxisAlignment 属性。

一种方法如下所示。为该行指定一些高度或使其展开。

return Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Expanded(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          IconButton(
                            icon: Icon(Icons.arrow_back),
                            color: Colors.black,
                            onPressed: () {},
                          ),
                        ],
                      ),
                      Expanded(
                        child: Container(
                          color: Colors.green,
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Container(
                                  alignment: Alignment.topCenter,
                                  height: 35,
                                  margin: const EdgeInsets.only(
                                      top: 45, left: 0, right: 20),
                                  child: TextField(),
                                ),
                                Container(
                                  height: 35,
                                  margin: const EdgeInsets.only(
                                      top: 5, left: 0, right: 0),
                                  child: TextField(),
                                )
                              ]),
                        ),
                      ),
                      Container(
                        color: Colors.blueGrey,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisAlignment: MainAxisAlignment.end,
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            IconButton(
                              icon: Icon(Icons.add),
                              color: Colors.black,
                              iconSize: 12,
                              onPressed: () {},
                            ),
                          ],
                        ),
                      ),
                    ]),
              ),
            ],
          ),
        )

【讨论】:

  • 不工作。现在两个图标都在顶部。所以箭头在它应该在的中心顶部,但 + 现在也在顶部中心。
  • 您是否使用了相同的代码mainAxisAlignment: MainAxisAlignment.end,这个 for plus 应该可以解决问题。或检查您的父小部件是否有任何覆盖此调用
  • 我做到了。没有任何东西可以移动到底部。我已经用整个代码更新了这个问题。当您单击设置的目的地字段时,我所追求的与 Uber 应用程序相同。
  • IconButton 有一个默认填充,这可能是导致问题的原因@jdog
  • Expanded(child: Row( 将告诉该行采用其父级的所有可用大小
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-21
  • 2013-12-21
  • 2015-07-31
  • 1970-01-01
  • 2022-12-17
  • 1970-01-01
相关资源
最近更新 更多