Flutter - 如何为单列中的不同容器赋予不同的宽度？

Question

我正在尝试从 dribble 开发一个 App 创意的克隆，可以在 here 找到。

你能告诉我我要写的代码是否正确吗？ 当我尝试使用包含在容器中的两个文本小部件（单独）包装一列时，当我尝试更改一个容器的宽度时，它也会更改另一个容器的边距。

我的代码是：-

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 30, left: 20),
              child: const Text(
                'Find Intrested Events to Join',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 30.0,
                  wordSpacing: 2,
                ),
              ),
              width: 200,
            ),
            // -----------------------------------------------------------------
            Container(
              margin: EdgeInsets.only(left: 20, top: 20),
              width: 220,
              child: Text(
                'We share all events like Charity, workshop, Blood drive, etc.',
                style: TextStyle(wordSpacing: 2, height: 1.4),
              ),
            )
          ],
        ),
      ),
    );
  

你能告诉我如何达到那个阶段，我可以改变容器的宽度而不影响其他人的边距。

Answer 1

在这种情况下最好使用Stack，因为它包含背景图像，还可以从flutter.dev了解更多关于Stack、Align、Positioned和LayoutBuilder的信息

玩这个小部件，

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: LayoutBuilder(
        builder: (context, constraints) {
          return Stack(
            children: [
              Container(
                color: Colors.amber.withOpacity(.4),
              ), //background image
              Positioned(
                left: 20,
                top: 30,
                child: SizedBox(
                  width: constraints.maxWidth * .5, // 50% of width
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text(
                        'Find Intrested Events to Join',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 30.0,
                          wordSpacing: 2,
                        ),
                      ),

                      SizedBox(
                        height: 20,
                      ), //spaces between text
                      Text(
                        'We share all events like Charity, workshop, Blood drive, etc.',
                        style: TextStyle(wordSpacing: 2, height: 1.4),
                      ),
                    ],
                  ),
                ),
              ),
              Align(
                // also Postisioned can be use
                alignment: Alignment.bottomCenter,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("hereh"),
                    ElevatedButton(onPressed: () {}, child: Text("Button"))
                  ],
                ),
              )
            ],
          );
        },
      )),
    );
  }
}