Flutter-如何2為包含在單列中的不同容器提供不同的寬度？

我正在嘗試從 dribble 開發一個 App 創意的克隆，可以在這里找到。

你能告訴我我正在嘗試撰寫的代碼是否正確？因為我試圖用包含在容器中的兩個文本小部件（單獨的）包裹一列，并且當我嘗試更改一個容器的寬度時，它也會更改另一個容器的邊距。

我的代碼是：-

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),
              ),
            )
          ],
        ),
      ),
    );
  

你能告訴我如何實作那個階段，我可以改變容器的寬度而不影響其他容器的邊距。

uj5u.com熱心網友回復：

這將是更好地使用Stack針對這種情況，而它包含的背景影像，也更多地了解Stack，Align，Positioned并LayoutBuilder從flutter.dev

玩這個小部件，

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"))
                  ],
                ),
              )
            ],
          );
        },
      )),
    );
  }
}

標籤：扑 镖 颤振布局

上一篇：lib/answer.dart:16:20:錯誤：無法將引數型別“Function”分配給引數型別“voidFunction()?”

下一篇：如何在顫振中制作從Get.find檢索的物件的副本