如何在Flutter中自定义小部件

时间:2019-08-09 07:05:53

标签: flutter flutter-layout

我想自定义身体对齐方式。...代码如下所示。我对flutter非常陌生,我想制作一个介绍性滑块页面。一切工作正常,但我在设计时遇到了一些问题

我正在使用PageViewModel小部件,在其中有3件东西:

  1. 标题
  2. 身体
  3. mainImage

现在标题覆盖顶部区域,主体覆盖底部区域,而mainImage覆盖中心区域。

我想使主体位于中心,并且应该覆盖页面的最大高度,但我无法通过对齐进行尝试,但到目前为止仍无法实现。

   PageViewModel(
          pageColor: const Color(0xFF3F61DF),
          iconImageAssetPath: 'assets/slide3.png',
          body: Text('',style: style),
          title: Text(''),
          mainImage:SlideWidget1(),
         textStyle: TextStyle(fontFamily: 'MyFont', color: 
         Colors.textcolor),
        ),
       @override
      Widget build(BuildContext context) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'IntroViews Flutter', //title of app
            theme: ThemeData(
             primarySwatch: Colors.blue,
            ), //ThemeData
              home: Builder(
             builder: (context) => IntroViewsFlutter(
              pages,
             onTapDoneButton: () {
             Navigator.push(
             context,
             MaterialPageRoute(
                   builder: (context) => LoginScreen(),
                  ), //MaterialPageRoute
                );
               },
           pageButtonTextStyles: TextStyle(
           color: Colors.white,
           fontSize: 18.0,
          ),
         ), //IntroViewsFlutter
        ), //Builder
       ); //Material App
      }
     }




      class SlideWidget1 extends StatelessWidget {

         @override
             Widget build(BuildContext context) {
              return Center(
                child: Card(
                elevation: 2,
                child: ClipPath(
                child: Container(
                height: 1500,
                child: Container(
                  height:1200,
                  width:300,
                  decoration: BoxDecoration(
                     border: Border(right: BorderSide(color: 
                       Colors.green, width: 5))),
                     color: Colors.white,
                     image: DecorationImage(
                             image: AssetImage("assets/slide1.png"),

                              alignment: Alignment.center,
                             ),
                        ),
               child:Align(
                 alignment: Alignment.bottomCenter,
                 child: Text("Keep track of all your accounts 
                             anytime anywhere",
                 style: TextStyle(fontSize: 20,color: 
                    Colors.textcolor)),

                  )
                ),
              ),
            ),
           );
          }
         }

0 个答案:

没有答案