小编Gia*_*omo的帖子

我正在尝试重新创建这个搜索输入，但我在保持它那么小方面遇到了麻烦，如果我添加 prefixIcon 高度会增加并且我似乎无法控制它。

这就是我现在所拥有的。 我正在使用一行，因为我还需要在输入字段后添加一个按钮，但这是以后的事。

Widget _buildSearch() => Container(
          padding: EdgeInsets.all(8.0),
          color: Color(0xFF131313),
          height: 50.0,
          child: Row(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: TextFormField(
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 11.0),
                  decoration: InputDecoration(
                      contentPadding: new EdgeInsets.symmetric(vertical: 0.0),
                      border: InputBorder.none,
                      prefixIcon: Padding(
                        padding: EdgeInsets.all(0.0),
                        child: Icon(
                          Icons.search,
                          color: Colors.grey,
                        ), // icon is 48px widget.
                      ),
                      hintText: 'Search artist, genre, playlist',
                      hintStyle: TextStyle(fontSize: 11.0)),
                ),
              ),
            ],
          ),
        );

我正在尝试在容器行上创建一个范围滑块,它应该创建一个音频波形,但我不知道从哪里开始...

主要问题是范围滑块位于容器行的顶部,它应该在"选定"部分更改颜色.

这是我现在拥有的:

用于创建图像和详细信息的代码.

class BeatLyricsPage extends StatefulWidget {
  final Beat beat;
  BeatLyricsPage(this.beat);

  @override
  _BeatLyricsPageState createState() => _BeatLyricsPageState(beat);
}

class _BeatLyricsPageState extends State<BeatLyricsPage> {
  final Beat beat;


  final _kPicHeight = 190.0;
  // used in _buildPageHeading to add the beat key and beat bpm
  Widget _buildBeatInfoItem(String text) => DecoratedBox(
        decoration: BoxDecoration(
          border: Border.all(color: MyColor.white, width: 1.0),
          borderRadius: BorderRadius.circular(4.0),
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 3.0, horizontal: 12.0),
          child: Text(text, style: TextStyle(color: MyColor.white, fontSize: 10.0, fontWeight: FontWeight.w600)),
        ),
      );

  final _kAudioControlsWidth = 180.0; …

如果首先单击元素,如何触发鼠标移动？我正在尝试将其用于音频播放器时间线.

.player__time--bar(@mousedown="setNewCurrentPosition($event)")
    .slider(role="slider" aria-valuemin="0" :aria-valuenow="currentPosition" :aria-valuemax="trackTotalDuration" aria-orientation="horizontal")
        .player__time--bar-current-position(:style="{width:  (100 / (trackTotalDuration / currentPosition)) + '%'}")

方法:

setNewCurrentPosition(e) {
    let tag = e.target
    // if the click is not on 'slider', grab div with class 'slider'
    if (e.target.className === 'player__time--bar') tag = e.target.firstElementChild
    else if (e.target.className === 'player__time--bar-current-position') tag = e.target.parentElement
    const pos = tag.getBoundingClientRect()
    const seekPos = (e.clientX - pos.left) / pos.width
    this.currentPosition = parseInt(this.trackTotalDuration * seekPos)
    // updates the time in the html
    this.$refs.player.currentTime = this.currentPosition
},

我很难理解如何最好地为身体创建一个可滚动的容器，该容器容纳默认情况下也是可滚动的子对象。

在这种情况下，网格不应该滚动，但是应该滚动整个页面，因此您可以看到网格内的更多元素。因此，基本上，整个内容应垂直移动，而ListView则应水平移动（但这已经可以正常工作了）

我可以使用它，但是它使用了一堆“银色”小部件，并且我希望有一个更好的解决方案可以在不使用所有这些额外小部件的情况下工作。

谢谢

到目前为止，这是我的代码：

class GenresAndMoodsPage extends AbstractPage {
  @override
  String getTitle() => 'Genres & Moods';

  @override
  int getPageBottomBarIndex() => BottomBarItems.Browse.index;

  static const kListHeight = 150.0;

  Widget _buildHorizontalList() => SizedBox(
        height: kListHeight,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 20,
          itemBuilder: (_, index) =>
              CTile(heading: 'Hip Hop', subheading: '623 Beats'),
        ),
      );

  Widget _buildGrid() => GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: LayoutSpacing.sm,
        mainAxisSpacing: LayoutSpacing.sm,
        children: List.generate(10, (index) {
          return CTile(
            padding: false,
            heading: 'Kevin Gates Type Beat',
            subheading: '623 FOLLOWERS',
            width: double.infinity,
          ); …

我是否这样做

Vue.router.push({ path: '/beats/catalog/1' }) 

或这个

Vue.router.push({ name: 'BeatsCatalog', params: { page: 1 } })

我得到了相同的结果: [vue-router] missing param for named route "BeatsCatalog": Expected "page" to be defined.

路由器:

{
        path: '/beats',
        components: {
            navbar: Navbar,
            default: { template: `<router-view/>` }
        },
        children: [{
                name: 'BeatsCatalog',
                path: 'catalog/:page',
                components: {
                    default: () => import('@/views/BeatsCatalog')
                },
                props: { default: true }
            },
            {
                path: 'upload',
                name: 'BeatsUpload',
                components: {
                    default: () => import('@/views/BeatsUpload')
                }
            },
        ],
        meta: { requiresAuth: true } …

我在使用打字稿的 vue 项目上配置 webpack 别名时遇到问题。如果我使用普通的 javascript，则不会遇到同样的问题，因此我很困惑

该项目分为 2 个，“app_marketplace”、“app_producer”（类似于管理员），我还有一个用于共享组件和实用程序的第三个文件夹。

项目文件夹结构：

• .env.marketplace
• .env.生产者
• 民众/
• 来源/
  • 应用市场/
  • app_producer/
  • 应用共享/
• vue.config.js
• tslint 文件、babel、package.json 等。

我将 2 应用程序与package.json.

例如，"serve:marketplace": "vue-cli-service serve --mode marketplace src/app_marketplace/main.ts"调用我的.env.marketplace文件并将其设置env为VUE_APP_MARKETPLACE=true

现在，vue.config.js我正在使用 env 变量来设置别名。

configureWebpack: {
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src/app_shared'),
            '@': path.resolve(__dirname, process.env.VUE_APP_MARKETPLACE ? 'src/app_marketplace' : 'src/app_producer')
        }
    }
}

问题是很多导入不起作用或给我错误，从我的main.ts内部开始app_marketplace。我无法解释的另一件事是为什么其中一些有效而一些无效。

import App from './App.vue'
import router from '~/router' // ERROR
import store …

您好，如何使用打字稿在基于类的组件中转换此组件？

<script>
import { Line } from 'vue-chartjs'
import { chartLast30Days, chartStylingMethods } from '#/mixins'
import { myChartOptions } from '#/const/charts'

export default {
    extends: Line,
    mixins: [chartLast30Days, chartStylingMethods],
    props: { chartPointsDownloads: Array, chartPointsPlays: Array, chartPointsSales: Array },        
}
</script>