我想添加一个从Adobe XD导出到ListView.separated的小部件，在该小部件中，我希望可以单击两个位置，但是我无法完全理解应该将InkWell（）或GestureDetector（）放在哪里，或者另一个使两个地方都可点击的小部件 这是代码：
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
margin: EdgeInsets.only(
top: 30.0,
),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
SizedBox(
width: 100.0,
child: Text(
'Logout',
textAlign: TextAlign.center,
textScaleFactor: 1.0,
style: TextStyle(
color: Colors.blueGrey,
fontSize: 22.0,
fontWeight: FontWeight.w300,
),
),
),
Image.asset(
'assets/call_info_logo.png',
width: 60.0,
),
Row(
children: <Widget>[
SizedBox(
width: 100.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/support.png',
width: 55.0,
),
],
),
),
],
),
],
),
),
Flexible(
child: Container(
margin: EdgeInsets.only(top: 55.0),
child: ListView.separated(
padding: EdgeInsets.only(
left: 30.0,
right: 30.0,
bottom: 30.0,
),
itemCount: 6,
separatorBuilder: (context, index) => SizedBox(
height: 40.0,
),
itemBuilder: (context, index) => Stack(
children: <Widget>[
Transform.translate(
offset: Offset(-21.0, -259.0),
child: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(85.0, 259.0),
child: SvgPicture.string(
_svg_chij22,
allowDrawingOutsideViewBox: true,
),
),
Transform.translate(
offset: Offset(-7.0, 139.0),
child: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(102.0, 132.0),
child: SizedBox(
width: 171.0,
height: 57.0,
child: SingleChildScrollView(
child: Text(
'г. Нур-Султан, ул. Кордай, д.2, под.4 ',
style: TextStyle(
fontFamily: 'Bahnschrift',
fontSize: 18,
color: const Color(0xffffffff),
),
textAlign: TextAlign.center,
)),
),
),
],
),
),
],
),
),
Transform.translate(
offset: Offset(-21.0, -259.0),
child: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(281.0, 259.0),
child: SvgPicture.string(
_svg_fep8be,
allowDrawingOutsideViewBox: true,
),
),
],
),
),
Transform.translate(
offset: Offset(-21.0, -259.0),
child: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(21.0, 259.0),
child: Container(
width: 61.0,
height: 80.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
bottomLeft: Radius.circular(25.0),
),
color: const Color(0xffcfdb24),
),
),
),
Transform.translate(
offset: Offset(37.0, 280.0),
child:
// Adobe XD layer: 'Icon awesome-file-v…' (shape)
SvgPicture.string(
_svg_xqnie9,
allowDrawingOutsideViewBox: true,
),
),
],
),
),
],
),
),
),
),
],
),
),
),
);
}
}
const String _svg_chij22 =
'<svg viewBox="85.0 259.0 193.0 80.0" ><path transform="translate(85.0, 259.0)" d="M 0 0 L 193 0 L 193 80 L 0 80 L 0 0 Z" fill="#2a7ac6" fill-opacity="0.85" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';
const String _svg_fep8be =
'<svg viewBox="281.0 259.0 61.0 80.0" ><path transform="matrix(-1.0, 0.0, 0.0, -1.0, 342.0, 339.0)" d="M 25 0 L 60 0 C 60.55228424072266 0 61 0.4477152228355408 61 1 L 61 79 C 61 79.55228424072266 60.55228424072266 80 60 80 L 25 80 C 11.19288063049316 80 0 68.80712127685547 0 55 L 0 25 C 0 11.19288063049316 11.19288063049316 0 25 0 Z" fill="#16cf2f" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /><path transform="translate(295.0, 276.0)" d="M 29.01785659790039 20.07470893859863 L 11.0267858505249 20.07470893859863 L 11.0267858505249 11.98993682861328 C 11.0267858505249 8.884631156921387 13.32645130157471 6.304718494415283 16.19921875 6.273351669311523 C 19.10100364685059 6.241985321044922 21.47321510314941 8.790531158447266 21.47321510314941 11.91936206817627 L 21.47321510314941 13.17403030395508 C 21.47321510314941 14.21697330474854 22.24944305419922 15.05603408813477 23.21428489685059 15.05603408813477 L 25.53571510314941 15.05603408813477 C 26.50055694580078 15.05603408813477 27.27678489685059 14.21697330474854 27.27678489685059 13.17403030395508 L 27.27678489685059 11.91936206817627 C 27.27678489685059 5.332350254058838 22.3074779510498 -0.02351734600961208 16.2137279510498 7.694517080381047e-06 C 10.1199779510498 0.02353273518383503 5.223214149475098 5.449975490570068 5.223214149475098 12.0369873046875 L 5.223214149475098 20.07470893859863 L 3.482142925262451 20.07470893859863 C 1.559709787368774 20.07470893859863 0 21.76066970825195 0 23.83871650695801 L 0 36.38540267944336 C 0 38.46344757080078 1.559709787368774 40.14941024780273 3.482142925262451 40.14941024780273 L 29.01785659790039 40.14941024780273 C 30.9402904510498 40.14941024780273 32.5 38.46344757080078 32.5 36.38540267944336 L 32.5 23.83871650695801 C 32.5 21.76066970825195 30.9402904510498 20.07470893859863 29.01785659790039 20.07470893859863 Z" fill="#ffffff" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';
const String _svg_xqnie9 =
'<svg viewBox="37.0 280.0 30.0 39.0" ><path transform="translate(37.0, 280.0)" d="M 29.99999809265137 9.288474082946777 L 29.99999809265137 9.75 L 19.99999809265137 9.75 L 19.99999809265137 0 L 20.47335815429688 0 C 20.97062301635742 0 21.44757461547852 0.1926386654376984 21.79921913146973 0.535412073135376 L 29.45085716247559 7.995761394500732 C 29.80244445800781 8.338640213012695 29.99996948242188 8.803627014160156 29.9999942779541 9.288474082946777 Z M 17.49999618530273 10.359375 L 17.49999618530273 0 L 1.87499988079071 0 C 0.8394531011581421 0 0 0.8184667825698853 0 1.828125 L 0 37.171875 C 0 38.18153381347656 0.8394531011581421 39 1.87499988079071 39 L 28.12499809265137 39 C 29.16054344177246 39 29.99999809265137 38.18153381347656 29.99999809265137 37.171875 L 29.99999809265137 12.1875 L 19.37499618530273 12.1875 C 18.34374809265137 12.1875 17.49999618530273 11.36484432220459 17.49999618530273 10.359375 Z M 24.99999618530273 21.329345703125 L 24.99999618530273 29.8577766418457 C 24.99999618530273 31.49127960205078 22.97320175170898 32.29512405395508 21.79913711547852 31.15048980712891 L 17.49999618530273 26.96035003662109 L 17.49999618530273 29.859375 C 17.49999618530273 30.86903190612793 16.66054725646973 31.6875 15.62499904632568 31.6875 L 6.874999523162842 31.6875 C 5.839452743530273 31.6875 4.999999523162842 30.86903190612793 4.999999523162842 29.859375 L 4.999999523162842 21.328125 C 4.999999523162842 20.31846809387207 5.839452743530273 19.5 6.874999523162842 19.5 L 15.62499904632568 19.5 C 16.66054725646973 19.5 17.49999618530273 20.31846809387207 17.49999618530273 21.328125 L 17.49999618530273 24.22715187072754 L 21.79913711547852 20.03670692443848 C 22.97187042236328 18.89336776733398 24.99999618530273 19.69462013244629 24.99999618530273 21.329345703125 Z" fill="#ffffff" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';
答案 0 :(得分：1)
这是向特定小部件添加任何类型操作的最简单方法-用InkWell包装它。就您而言，它看起来像这样：
InkWell(
onTap: () {},
child: Transform.translate(
offset: Offset(85.0, 259.0),
child: SvgPicture.string(
_svg_chij22,
allowDrawingOutsideViewBox: true,
),
),
),
答案 1 :(得分：0)
只需用需要接受用户点击的GestureDetector或InkWell包装小部件即可。
例如您可以使用GestureDetector包装小部件，它将为您提供onTap委托。
GestureDetector(
onTap: () {print('Hi') }
child:
SizedBox(
width: 100.0,
child: Text(
'Logout',
textAlign: TextAlign.center,
textScaleFactor: 1.0,
style: TextStyle(
color: Colors.blueGrey,
fontSize: 22.0,
fontWeight: FontWeight.w300,
),
),
),)