flutter 如何移动文件夹图标左侧

oo7oh9g9 于 2023-03-19 发布在 Flutter

关注(0)|答案(4)|浏览(117)

我是Flutter的新手，尝试建立一个简单的UI，但是遇到了问题。我建立了一个带有图标的墨迹空间。我的问题是我不能让文件夹图标在左边。
我的代码：

Container(
  width: MediaQuery.of(context).size.width - 20,
  padding: EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(30),
            color: Colors.blue,
            child: Container(
              padding: EdgeInsets.all(20),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          InkWell(
                            onTap: () {
                              var personUnderCareIdentifier = "";
                              if (_personUnderCare.isNotEmpty) {
                                personUnderCareIdentifier =
                                    _selectedPersonUnderCare
                                        .documentID;
                              }
                            },
                            child: const Text(
                              "View all",
                              style: TextStyle(
                                  fontSize: 15,
                                  height: 1.4,
                                  fontWeight: FontWeight.w600,
                                  color: Color.fromRGBO(
                                      14, 113, 176, 1)),
                            ),
                          ),
                          Column(
                            children: [
                              Container(
                                color: Colors.red,
                                padding: EdgeInsets.all(20),
                                child: Column(
                                  mainAxisAlignment:
                                      MainAxisAlignment.start,
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    InkWell(
                                      onTap: () {},
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Image(
                                            height: 70,
                                            image: AssetImage(
                                                "assets/images/folder.png"),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      )),
    ],
  ),
),

这是我写的代码，希望有人能帮我解决问题，同时教我使用flutter，谢谢。

flutter

来源：https://stackoverflow.com/questions/75756022/how-to-move-folder-icon-left-side

4条答案

按热度按时间

70gysomp1#

您需要在mainAxisAlignment中进行更改。

Container(
                width: MediaQuery.of(context).size.width - 20,
                padding: EdgeInsets.all(20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [

                    Expanded(
                        child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          margin: EdgeInsets.all(30),
                          color: Colors.blue,
                          child: Container(
                            padding: EdgeInsets.all(20),
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start, <---- make here change
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        InkWell(
                                          onTap: () {
                                            var personUnderCareIdentifier = "";
                                            if (_personUnderCare.isNotEmpty) {
                                              personUnderCareIdentifier =
                                                  _selectedPersonUnderCare
                                                      .documentID;
                                            }
                                          },
                                          child: const Text(
                                            "View all",
                                            style: TextStyle(
                                                fontSize: 15,
                                                height: 1.4,
                                                fontWeight: FontWeight.w600,
                                                color: Color.fromRGBO(
                                                    14, 113, 176, 1)),
                                          ),
                                        ),
                                        Column(
                                          children: [
                                            Container(
                                              color: Colors.red,
                                              padding: EdgeInsets.all(20),
                                              child: Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.start,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  InkWell(
                                                    onTap: () {},
                                                    child: Row(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .start,
                                                      children: [
                                                        Image(
                                                          height: 70,
                                                          image: AssetImage(
                                                              "assets/images/folder.png"),
                                                        )
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    )),
                    
                  ],
                ),
              ),

赞(0）回复(0）举报 2023-03-19

lymgl2op2#

如果您想对Row执行此操作，只需将Row一分为二：一个用于“查看全部”，另一个用于文件夹，对齐方式不同。以下是使用此解决方案重构的代码：

Padding(
    padding: const EdgeInsets.all(50),
    child: ColoredBox(
      color: Colors.blue,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            Row( /// <------ HERE
              mainAxisAlignment: MainAxisAlignment.end, /// <------ HERE
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    var personUnderCareIdentifier = "";
                    if (_personUnderCare.isNotEmpty) {
                      personUnderCareIdentifier =
                          _selectedPersonUnderCare
                              .documentID;
                    }
                  },
                  child: const Text(
                    "View all",
                    style: TextStyle(
                        fontSize: 15,
                        height: 1.4,
                        fontWeight: FontWeight.w600,
                        color: Color.fromRGBO(
                            14, 113, 176, 1)),
                  ),
                ),
              ],
            ),
            Row( /// <------ HERE
              mainAxisAlignment: MainAxisAlignment.start, /// <------ HERE
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  color: Colors.red,
                  padding: const EdgeInsets.all(20),
                  child: InkWell(
                    onTap: () {},
                    child: Image(
                      height: 70,
                      image: AssetImage(
                          "assets/images/folder.png"),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ),

您也可以使用Align小部件来代替Rows，但是这需要更多的代码重构。

赞(0）回复(0）举报 2023-03-19

deikduxw3#

我能够修改你的代码一点，以达到你的预期目标.

你基本上必须处理你的 * 列 * 和 * 行 * 排列/嵌套。
第一个Column包含2个Columns（子项），每个子项包含**Text（）和Image（）小部件（但现在这两个小部件都 Package 在Row（）**小部件中，以便轻松控制它们的对齐）。

而且效果很好！

Container(
          width: MediaQuery.of(context).size.width - 20,
          padding: const EdgeInsets.all(20),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.all(30),
                      color: Colors.blue,
                      child: Container(
                        padding: const EdgeInsets.all(20),
                        child: Column(
                          children: [
                            Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    InkWell(
                                      onTap: () {
                                        var personUnderCareIdentifier = "";
                                    if (_personUnderCare.isNotEmpty) {
                                      personUnderCareIdentifier = _selectedPersonUnderCare.documentID;
                                    }
                                      },
                                      child: const Text(
                                        "View all",
                                        style: TextStyle(fontSize: 15, height: 1.4, fontWeight: FontWeight.w600, color: Color.fromRGBO(14, 113, 176, 1)),
                                      ),
                                    ),
                                  ],
                                ),
                                Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                        Container(
                                          color: Colors.red,
                                          padding: const EdgeInsets.all(20),
                                          child: InkWell(
                                            onTap: () {},
                                            child: const Image(height: 40, image: AssetImage(Images.appIcon)),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),

您可以在移动的Here上查看截图

赞(0）回复(0）举报 2023-03-19

ar7v8xwq4#

Package 你的容器在对齐小部件，然后应用对齐属性可能会工作，因为它也工作在我这边，特别是在flutter web谢谢

赞(0）回复(0）举报 2023-03-19