我页面中带有背景图片的可点击文本

Question

I have a Problem,in my page i want to clickable some texts that i use above the background image,i use InkWell and GestureDetector even but both of them didnt work,i use them for background image even but they didnt work ,i Dont know how i solve it,plz help me

Widget build(BuildContext context) {
return new Scaffold(

  body: new Stack(
    children: <Widget>[

        Image.asset('images/mainUiNew.jpg',
         height: MediaQuery.of(context).size.height,
         width: double.infinity,
         fit:  BoxFit.cover,
         alignment: Alignment.center,),

      new Align(
        alignment: Alignment(-0.58, -0.7),
        child: new InkWell(
          child: new Text('Tracking',style: StyleTitle() ),
          onTap: () {
            print('hi');
          },
        ),
      ),

     new Align(
        alignment: Alignment(-0.49, -0.55),
        child: new InkWell(
          child: new Text('Track & Trace Your Package',style: StyleSubtitle()),
          onTap: () {
            var Router = new MaterialPageRoute(builder: (BuildContext){
              return new CustomLoginForm();
            });
            Navigator.of(context).push(Router);
          },
        ),
      ),
      new Align(
        alignment: Alignment(0.1,-0.1),
        child: new InkWell(
          child: new Text('OutBound',style: StyleTitle()),
          onTap: (){
            var Router = new MaterialPageRoute(builder: (BuildContext){
              return new OutBoundRate();
            });
            Navigator.of(context).push(Router);
          },
        ),
      ),
      new Align(
          alignment: Alignment(0.3, 0.02),
          child: new InkWell(
            child: new Text('Get OutBound Package Rate ',style: StyleSubtitle()),
            onTap: (){
              var Router = new MaterialPageRoute(builder: (BuildContext){
                return new OutBoundRate();
              });
              Navigator.of(context).push(Router);
            },
          )

      ),
      new Align(
          alignment: Alignment(-0.58,0.6),
          child: new InkWell(
            child: new Text('InBound',style: StyleTitle()),
            onTap: (){
              var Router = new MaterialPageRoute(builder: (BuildContext){
                return new InBoundRate();
              });
              Navigator.of(context).push(Router);
            },
          )
      ),
      new Align(
          alignment: Alignment(-0.49, 0.7),
          child: new InkWell(
            child: new Text('Get InBound Package Rate ',style:StyleSubtitle()),
            onTap: (){
              var Router = new MaterialPageRoute(builder: (BuildContext){
                return new InBoundRate();
              });
              Navigator.of(context).push(Router);
            },
          )

      ),
      new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return new ExpandableListView(title: "Main Menu");
        },
        itemCount: 1,
      ),
    ],
  ),
  floatingActionButton: Container(
    height: 100.0,
    width: 100.0,
    decoration: BoxDecoration(
      borderRadius: new BorderRadius.all(
          Radius.circular(60.0)),
        boxShadow: <BoxShadow>[
          BoxShadow(

              color: Colors.black54,
              blurRadius: 10.0,
              offset: Offset(0.0, 0.75)
          )
        ],
        color: Colors.white,
    ),

    child: FittedBox(
      child: FloatingActionButton(


        backgroundColor: Color(0xffffcd05),
          child: Padding(

            padding: const EdgeInsets.all(4.0),
            child: Image.asset("images/logo-express.png",height:200.0,width: 300.0,

            ),
          ),
          onPressed: () {
            var Router = new MaterialPageRoute(builder: (BuildContext){
              return new FirstPage();
            });
            Navigator.of(context).push(Router);
          }),

    ),
   //shape:
   //        icon: new Icon(Icons.add,
   //        color: Color(0xffd4351c),),

   // shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(100.0),)),
   // child: Image.asset("images/logo-express.png",height:200.0,width: 400.0,),

  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    //clipBehavior:Clip.antiAlias,
    color: Color(0xffd4351c),
     //shape: CircularNotchedRectangle(),
    child: new Row(
      mainAxisSize: MainAxisSize.min,
      //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
         //SizedBox(width: double.infinity, height: 70.0,),
        Material(
          child: SizedBox(
           // width: double.infinity,
            height: 60.0,),
          color: Color(0xffd4351c),
        ),
       // SizedBox(),
        FlatButton.icon(onPressed: (){
          Navigator.push(context, SlideRightRoute(page: ContactUs()));
        },
          icon: Icon(Icons.phone_in_talk,color:Colors.white,),
          label: new Text('Contact Us',style: TextStyle(color: Colors.white),),
          padding: EdgeInsets.fromLTRB(10.0, 0, 0, 0),),

        FlatButton.icon(onPressed: (){
          Navigator.push(context, SlideLeftRoute(page: AboutUs()));
        },
          icon: Icon(Icons.person,color: Colors.white,),
          label: new Text('About US',style: TextStyle(color: Colors.white),),
          padding: EdgeInsets.fromLTRB(200, 0 , 0.0, 0),),
      ],

    )
  ),
);
}

Answer 1

使用 Stack 你应该使用 positioned widget 而不是 Align 并使用 gesturedetector 对于手势检测器，请使用以下代码：

GestureDetector(
  onTap: () {
    print("onTap called.");
  },
  child: Text("foo"),
),

它将代替墨水池工作。

Answer 2

如果你想使用堆栈：

return Scaffold(
   body: Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
     child: Stack(
       children: <Widget>[
        *your children here*
       ]
     )
   )
);

但我建议使用这个：

return Scaffold(
   body: Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
     decoration: BoxDecoration(
       image: DecorationImage(
         image: NetworkImage(*image_url*) or you can use AssetImage(*asset_path*),
         fit: BoxFit.cover
       )
     ),
     child: Row/Column(
        children: <Widget>[
           *your children here*
        ]
     )
   )
);

Answer 3

我需要的是 ListView.builder.

内的 shrinkWrap = true

否则 children 将不知道 space 在可滚动小部件中需要多少。

我页面中带有背景图片的可点击文本

Clickable Texts in my page with background image

android

flutter

flutter-test

flutter-layout