颤振将svg添加到特定部分
Posted
技术标签:
【中文标题】颤振将svg添加到特定部分【英文标题】：flutter with add svg to a specific part 【发布时间】：2021-11-07 11:49:02 【问题描述】：我目前有一个带有这样图像的页面，但我想将 svg 图像添加到底部的按钮部分，如第二张图像所示。我该怎么做？
图片
我的代码：
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main()
runApp(const MyApp());
class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'URL Shortener',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: StartPage(),
);
class StartPage extends StatelessWidget
@override
Widget build(BuildContext context)
return Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: ListView(
children: [
Center(
child: Text(
"Shortly",
style: TextStyle(
fontSize: 40,
height: 2.0,
color: Color.fromRGBO(53, 50, 62, 10),
fontWeight: FontWeight.bold),
),
),
SvgPicture.asset(
'assets/illustration.svg',
),
Center(
child: Text(
"Let's get started!",
style: TextStyle(
fontSize: 20,
color: Color.fromRGBO(53, 50, 62, 10),
fontWeight: FontWeight.bold),
),
),
Center(
child: SizedBox(
width: 200,
height: 60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Paste your first link into the field to shorten it",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color.fromRGBO(76, 74, 85, 10),
fontWeight: FontWeight.bold)),
),
),
),
Center(
child: SizedBox(
width: 300,
height: 40,
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
fillColor: Colors.white,
filled: true,
hintText: 'Shorten a link here ...'),
),
),
),
Center(
child: SizedBox(
width: 300,
child: ElevatedButton(
onPressed: ()
print("Button Click");
,
style: ElevatedButton.styleFrom(
primary: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
minimumSize: Size(60, 40),
),
child: Text('SHORTEN IT!'),
),
),
)
],
),
));
您好，我目前有一个带有这样图像的页面，但我想将 svg 图像添加到底部的按钮部分，如第二张图像所示。我该怎么做？
【问题讨论】：
在这种情况下你可以使用堆栈，或者容器中的裁剪器。将ListView 替换为Stack
在这种情况下我应该在哪里添加 svg？ @YeasinSheikh
在 ListView 的最后一个子节点上使用 SizedBox < height:x <Column< two buttons here>>> 和 Column >mainAxisAlignment: MainAxisAlignment.center,
【参考方案1】：
演示小部件
class StartPage extends StatelessWidget
@override
Widget build(BuildContext context)
return Scaffold(
backgroundColor: Colors.grey[300],
body: ListView(
children: [
Center(
child: Text(
"Shortly",
style: TextStyle(
fontSize: 40,
height: 2.0,
color: Color.fromRGBO(53, 50, 62, 10),
fontWeight: FontWeight.bold),
),
),
// SvgPicture.asset(
// 'assets/illustration.svg',
// ),
Container(
height: 200,
color: Colors.deepPurple.withOpacity(.3),
child: Text("SVG assets here"),
),
Center(
child: Text(
"Let's get started!",
style: TextStyle(
fontSize: 20,
color: Color.fromRGBO(53, 50, 62, 10),
fontWeight: FontWeight.bold),
),
),
Center(
child: SizedBox(
width: 200,
height: 60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Paste your first link into the field to shorten it",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color.fromRGBO(76, 74, 85, 10),
fontWeight: FontWeight.bold)),
),
),
),
SizedBox(
/// bottombackground height
height: 220,
child: Stack(
alignment: Alignment.center,
children: [
/// background svg asset
Container(
color: Colors.deepOrange.withOpacity(.4),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 300,
height: 40,
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
fillColor: Colors.white,
filled: true,
hintText: 'Shorten a link here ...'),
),
),
/// a little space between buttons
SizedBox(
height: 10,
),
SizedBox(
width: 300,
child: ElevatedButton(
onPressed: ()
print("Button Click");
,
style: ElevatedButton.styleFrom(
primary: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
minimumSize: Size(60, 40),
),
child: Text('SHORTEN IT!'),
),
),
],
),
],
),
),
],
),
);
【讨论】：
使用SizedBox(height:x) 在小部件之间提供空格。它解决了你的问题吗？【参考方案2】：
Widget build(BuildContext context)
return Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Container(
height:MediaQuery.of(context).size.height,
width:MediaQuery.of(context).size.width,
child: Stack(
children: [
SvgPicture.asset(
"assets/a.svg",
fit: BoxFit.fill,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween ,
children: [
Center(
child: Container(
margin: EdgeInsets.only(top:20.0),
child: Text(
"Shortly",
style: TextStyle(
fontSize: 40,
height: 2.0,
color: Color.fromRGBO(53, 50, 62, 10),
fontWeight: FontWeight.bold),
),
),
),
Column(
children: [
Center(
child: Container(
margin: EdgeInsets.only(top:200.0),
child: Text(
"Let's get started!",
style: TextStyle(
fontSize: 20,
color: Color.fromRGBO(53, 50, 62, 10),
fontWeight: FontWeight.bold),
),
),
),
Center(
child: SizedBox(
width: 200,
height: 60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Paste your first link into the field to shorten it",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color.fromRGBO(76, 74, 85, 10),
fontWeight: FontWeight.bold)),
),
),
),
],
),
Container(
height: 150.0,
color: Colors.purple,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Container(
width: 300,
height: 40,
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
fillColor: Colors.white,
filled: true,
hintText: 'Shorten a link here ...'),
),
),
),
Center(
child: SizedBox(
width: 300,
child: ElevatedButton(
onPressed: ()
print("Button Click");
,
style: ElevatedButton.styleFrom(
primary: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
minimumSize: Size(60, 40),
),
child: Text('SHORTEN IT!'),
),
),
),
],
),
)
],
),
],
),
),
));
【讨论】：
请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。以上是关于颤振将svg添加到特定部分的主要内容，如果未能解决你的问题，请参考以下文章
将 UITapGestureRecognizer 添加到 UILabel 的特定部分的最佳方法是啥？
将多个firebase项目添加到一个flutter（android部分）项目中