Flutter IconButton 删除左侧的填充以与标题文本对齐答案

【问题标题】：Flutter IconButton Remove Padding on Left to Align with Title TextsFlutter IconButton 删除左侧的填充以与标题文本对齐
【发布时间】：2021-11-24 18:06:41
【问题描述】：

到目前为止，即使将边距设置为 0 和框约束，它也只是在中间。

 Row(children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(
                      3, 3, 3, 6),
                  child: Container(
                    width: 150,
                    height: 30,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "Title Sub-title",
                        textAlign: TextAlign.left,
                        maxLines: 2,
                        style: TextStyle(
                          height: 1.2,
                          fontFamily:
                              'Roboto’,
                          fontSize: 12,
                          letterSpacing: 0.15,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment:
                  MainAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(
                      0, 10, 0, 3),
                ),
                IconButton(
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () {},
                  icon: Icon(
                    Icons.bookmark_border,
                    size: 20.0,
                    color: Colors.black,
                  ),
                ),
                Text(
                  "Author",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    height: 1.1,
                    fontFamily: 'Roboto Light',
                    fontSize: 8,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ],
),

【问题讨论】：

你应该在行下尝试crossAxisAlignment:CrossAxisAlignment.start，默认是居中
嗨@Jahidul，我试过了，并删除了文本样式下的高度设置。但是图标按钮左侧的填充并没有减少/删除。唯一移动的是“作者”文本行，它变得更高，与书签图标更不对齐。
将行包裹在 Padding() 中并从行中移除子 Padding
另外，将您的代码以文本形式发布 - 以图像形式发布会使我们难以复制以进行测试和编辑
你好@Ranvir，我尝试将代码作为文本发布，但它一直被标记为代码文本过多。 :( 你能看到问题的编辑部分吗？代码在那里。

标签： flutter flutter-layout flutter-dependencies flutter-test

【解决方案1】：

您可以将第一个 Container 保留在不同的列中，并为以下三个孩子创建单独的列。

【讨论】：

【解决方案2】：

尝试使用列树并根据需要调整填充

import 'package:flutter/material.dart';
import 'package:so_test/screen/child_page.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text("Test obviously"),
          ),
          body: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.green,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(10, 10, 3, 0),
                  child: Container(
                    width: 150,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "Title",
                        textAlign: TextAlign.left,
                        maxLines: 2,
                        style: TextStyle(
                          height: 1.2,
                          fontSize: 12,
                          letterSpacing: 0.15,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.fromLTRB(10, 10, 3, 0),
                  width: 150,
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Sub Title",
                      textAlign: TextAlign.left,
                      maxLines: 2,
                      style: TextStyle(
                        height: 1.2,
                        fontSize: 12,
                        letterSpacing: 0.15,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 5,
                    ),
                    IconButton(
                      padding: EdgeInsets.zero,
                      constraints: BoxConstraints(),
                      onPressed: () {},
                      icon: Icon(
                        Icons.bookmark_border,
                        size: 20.0,
                        color: Colors.black,
                      ),
                    ),
                    Text(
                      "Author",
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        height: 1.1,
                        fontFamily: 'Roboto Light',
                        fontSize: 8,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ));
  }
}

输出：

【讨论】：

感谢您的回答，由于尺寸的原因，我能够通过一些修改来使用它。 ^_^