Question

我在单击时使用了三张图像，这些图像将导航到其他页面，因此如何在这些图像上使用onClick？我的代码如下：

Row(
      children: [
        Expanded(
          child: Column(
            children: <Widget>[
              Container(
                  child: ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Image.asset('assets/cat.jpg',
                    width: 110.0, height: 110.0),
              )),
              Text(
                'Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Container(
                  child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.asset('assets/cat.jpg',
                    width: 110.0, height: 110.0),
              )),
              Text(
                'Buy Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Container(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset('assets/cat.jpg',
                        width: 110.0, height: 110.0),
                  )),
              Text(
                'Prizes',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
      ],
    ),

预期：添加onClick图片我使用了GestureDetector，但它抛出了错误，因此我需要知道应该使用什么以及如何使用。

Answer 1

Material(
        child: InkWell(
          onTap: () {},
          child: Container(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset('assets/cat.jpg',
                  width: 110.0, height: 110.0),
            ),),
        )
    )

Answer 2

您可以使用@Murat Aslan展示的InkWell。

您还可以使用GestureDetector，如下所示。

Material(
      child: GestureDetector(
        onTap: () {},
        child: Container(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Image.asset('assets/cat.jpg',
                width: 110.0, height: 110.0),
          ),
        ),
      ),
    )

Answer 3

我阅读了其他答案，发现您的边框有问题，请尝试此解决方案。

<appender name="AdoNetAppender" type="DigitalDrawingStore.Backend.Logging.AdoNetAppenders.DdsAdoNetAppender">
      <bufferSize value="1" />
      <connectionType value="System.Data.SqlClient.SqlConnection, System.Data, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      <ReconnectOnError value="true" />
      <connectionString value="data source = (localdb)\\MSSQLLocalDB; initial catalog = TestAdoNetLogDb; integrated security = true" />
      <commandText value="" />
      <commandType value="Text" />

      <parameter>
        <parameterName value="@log_date_time" />
        <dbType value="String" />
        <layout type="log4net.Layout.PatternLayout" value="%date{yyyy'-'MM'-'dd HH':'mm':'ss'.'fff}" />
      </parameter>
      <parameter>
        <parameterName value="@log_type" />
        <dbType value="String" />
        <size value="50" />
        <layout type="log4net.Layout.PatternLayout" value="%property{LogType}" />
      </parameter>
      <parameter>
        <parameterName value="@machine_name" />
        <dbType value="String" />
        <size value="255" />
        <layout type="log4net.Layout.PatternLayout" value="%property{MachineName}" />
      </parameter>
      <parameter>
        <parameterName value="@user_name" />
        <dbType value="String" />
        <size value="255" />
        <layout type="log4net.Layout.PatternLayout" value="%property{UserName}" />
      </parameter>
      <parameter>
        <parameterName value="@log_message" />
        <dbType value="String" />
        <size value="4000" />
        <layout type="log4net.Layout.PatternLayout" value="%property{LogMessage}" />
      </parameter>
       <parameter>
        <parameterName value="@log_exception" />
        <dbType value="String" />
        <size value="4000" />
        <layout type="log4net.Layout.PatternLayout" value="%property{LogException}" />
      </parameter>
    </appender>

Answer 4

另一种方法是将FlatButton与Image一起用作子元素：

FlatButton(
    onPressed: () {
      print('I got clicked');
    },
    child: Image.asset('images/ball1.png'),
  ),

Answer 5

要在点击图像时渲染材料飞溅，请使用Ink.image

InkWell(
  onTap: () {},
  child: Ink.image(
    image: AssetImage('assets/cat.jpg'),
    // fit: BoxFit.cover,
    width: 110,
    height: 110,
  ),
)

如何在flutter中添加onClick on image.asset？

5 个答案: