如何在 Flutter 中重新创建此布局？

Question

我正在将我的应用程序从 Kotlin 重写为 Flutter，但我需要 Flutter 小部件方面的帮助。

我正在尝试在 Flutter 中从 Android 中重新创建我在 Native Kotlin 中所做的布局，但我正在为简单的事情而苦苦挣扎。

这是我在 Kotlin 中所做的原始布局：

这是我几乎在 Flutter 中所做的布局：

我希望像在 Kotlin 布局中那样从左到右一直拉伸图像。

我还希望文本“Wybierz kupon”位于中心。

如果 Flutter 的 Container 小部件有子部件，我可以做到这一点。

有没有人可以帮助我？

Flutter 中的代码：

import 'package:flutter/material.dart';

class Coupon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset('assets/images/coupon_hamburger.png'),
          Text('Wybierz Kupon'),
          FlatButton(
          color: Colors.blue,
          textColor: Colors.white,
          disabledColor: Colors.grey,
          disabledTextColor: Colors.black,
          padding: EdgeInsets.all(8.0),
          splashColor: Colors.blueAccent,
          onPressed: () {},
          child: Text(
            "Klasyczny kupon",
            style: TextStyle(fontSize: 20.0),
          ),
        )
        ],
      ),
    );
  }
}

Answer 1

您需要发现额外的小部件： 检查这个：https://flutter.dev/docs/reference/widgets 并观看youtube系列flutter widget of the week

关于您的问题：您可以在此处使用中心小部件

class Coupon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset('assets/images/coupon_hamburger.png'),
          SizedBox(
            height: 20,
          ),
          Center(
            child: Text('Wybierz Kupon',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                )),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: FlatButton(
              color: Colors.blue,
              textColor: Colors.white,
              disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
              padding: EdgeInsets.all(8.0),
              splashColor: Colors.blueAccent,
              onPressed: () {},
              child: Text(
                "Klasyczny kupon",
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 2

身体可以这样做

return new Scaffold(
  appBar: AppBar(backgroundColor: Color(0xFF36474f),

          actions: <Widget>[
            // action button
            Row(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
               Text('Jak UZYWAC?',style: TextStyle(
                  fontSize: 10,
                  fontWeight: FontWeight.bold, color: whiteColour
                )),
             Text('HAMBURGER',style: TextStyle(
                  fontSize: 10,
                  fontWeight: FontWeight.bold, color: whiteColour
                )),
             Text('LODY',style: TextStyle(
                  fontSize: 10,
                  fontWeight: FontWeight.bold, color: whiteColour
                )),
             Text('CHEESEBURGER',style: TextStyle(
                  fontSize: 10,
                  fontWeight: FontWeight.bold, color: whiteColour
                )),   
            ],)

            // overflow menu
          ]         
  ),
            body:  Container(    color: Color(0xFF36474f),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset('assets/images/coupon_hamburger.png'),
          SizedBox(
            height: 20,
          ),
          Center(
            child: Text('Wybierz Kupon:',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold, color: whiteColour
                )),
          ),
          FlatButton(
            color: Colors.orange,            
            onPressed: () {},
            child: Text(
              "Klasyczny kupon",
              style: TextStyle(fontSize: 20.0,color: Colors.white),
            ),
          ),
          FlatButton(
            color: Colors.red,            
            onPressed: () {},
            child: Text(
              "Klasyczny kupon",
              style: TextStyle(fontSize: 20.0,color: Colors.white),
            ),
          )
        ],
      ),
    ),
  );   

而 TabBar 就是基于这个例子做的：

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({ Key key }) : super(key: key);
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

 @override
 void dispose() {
   _tabController.dispose();
   super.dispose();
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          final String label = tab.text.toLowerCase();
          return Center(
            child: Text(
              'This is the $label tab',
              style: const TextStyle(fontSize: 36),
            ),
          );
        }).toList(),
      ),
    );
  }
}