如何删除列中某些子项的填充？

Question

Padding(
  padding: const EdgeInsets.all(20.0),
  child: Column(
    children: [
      // ... some widgets
      Padding(
        padding: const EdgeInsets.all(-20.0), // Error: How to do something like this?
        child: FooWidget()
      ), 
      // ... more widgets
      BarWidget(), // Remove padding from here also
      // ... and some more widgets
    ],
  ),
)

我为我的

20

提供了

Column

的填充，但我想从它的一些子元素中删除此填充，例如

FooWidget

、

BarWidget

等。我该怎么做？

注意：我不是在寻找解决方法，例如为其他小部件而不是根

Column

提供填充，或者将这些小部件包装在另一个

Column

中并为该列提供填充等。

Answer 1

flutter 中不存在负 margin 之类的东西。 您可以尝试使用 x、y、z 轴上的变换作为容器小部件上的变换属性的解决方法。

或者尝试使用忽略父级填充的 SizedBox。

这是一个应该有效的类似示例：

child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  Container(
                      width: double.infinity, height: 20, color: Colors.green),
                  
                  // This child ignores parent padding.
                  SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 20,
                    child: Expanded(
                      child: OverflowBox(
                          maxWidth: MediaQuery.of(context).size.width,
                          child: Container(
                              width: double.infinity,
                              height: 20,
                              color: Colors.red)),
                    ),
                  ),
                  Container(
                      width: double.infinity,
                      height: 20,
                      color: Colors.blue),
                  ],
              ),
            ),

Answer 2

您可以对要删除填充的小部件应用转换，例如：

Container(
              transform: Matrix4.translationValues(-20.0, 0, 0.0), //here
              child: FooWidget()),

Answer 3

这是 @I.Step 答案的简短版本

IntrinsicHeight(
  child: OverflowBox(
      maxWidth: MediaQuery.of(context).size.width,
       child: Container(
               color: Colors.red,
                 height: 20,
                  ),
             ),
         )

Answer 4

此工作解决方案使用

UnconstrainedBox

只去掉填充的左侧和右侧。当 screenWidth 无法使用时，你可以先计算overflowWidth。

此外，这会带来一个

RenderConstraintsTransformBox overflowed

异常，该异常将在应用程序发布版本中消失，例如

flutter build appbundle

适用于 Android 应用程序。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: UnboundedWidget(),
    );
  }
}

class UnboundedWidget extends StatelessWidget {
  const UnboundedWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double overflowWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Unbounded demo'),
      ),
      body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              UnconstrainedBox(
                child: Container(
                  color: Colors.red,
                  width: overflowWidth,
                  child: const Text('123'),
                ),
              ),
            ],
          )),
    );
  }
}