标签: segmentedcontrol

什么是实施的最佳实践SegmentedControllIOS与ListView？我尝试了三个解决方案,所有示例都包含SegmentedControllIOS两个段和两个段ListView.我邀请您讨论这三个的表现(也许有人可以提出其他更好的解决方案).从我的角度来看,示例是从最有效的顺序给出的.

1.两个独立的dataSource,一个ListView(更改ListView的dataSource)

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds1: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      ds2: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      index: 0,
    };
  }

  render() {
    return (
      <View>
        <SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={() => this.setState({index: (this.state.index+1)%2})}
        />
        <ListView dataSource={this.state.index ? this.state.ds2 : this.state.ds1} />
      </View>
    );
  }
}

2.两个独立的dataSource和两个独立的ListView

class Example extends Component {
  constructor(props) {
    super(props);
    this.state …

在 SwiftUI 中，Pickerof 样式SegmentedPickerStyle占据其封闭视图的整个宽度。我怎样才能让它只占据它需要的宽度？

考虑一下： 它是由以下代码生成的：

struct ContentView: View {
    @State var value = 1
    var body: some View {
        Picker("Value", selection: $value) {
            Text("One").tag(1)
            Text("Two").tag(2)
        }
        .pickerStyle(SegmentedPickerStyle())
        .padding()
    }
}

如何从两个选择器选择中删除较大的边距，使选择器仅达到所需的宽度？这似乎是一个非常基本的问题，但我却找不到答案。

我用这种方法得到渐变图像

func gradient(size:CGSize,color:[UIColor]) -> UIImage?{
    //turn color into cgcolor
    let colors = color.map{$0.cgColor}
    //begin graphics context
    UIGraphicsBeginImageContextWithOptions(size, true, 0.0)
    guard let context = UIGraphicsGetCurrentContext() else {
        return nil
    }
    // From now on, the context gets ended if any return happens
    defer {UIGraphicsEndImageContext()}
    //create core graphics context
    let locations:[CGFloat] = [0.0,1.0]
    guard let gredient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors as NSArray as CFArray, locations: locations) else {
        return nil
    }
    //draw the gradient
    context.drawLinearGradient(gredient, start: CGPoint(x:0.0,y:size.height), end: CGPoint(x:size.width,y:size.height), options: []) …

我尝试重新实现我正在使用的 SegmentedControlers，因为它们在 Xcode 11 beta 5 中已被弃用。这花了一段时间但我得到了我想要的外观。但是，当我用 onTapGesture() 替换 tapAction 时，选择器停止工作。

下面的代码显示了问题。注释掉 pickerStyle 会得到一个与 onTapGesture() 一起工作的轮选择器

import SwiftUI

var oneSelected = false
struct ContentView: View {
    @State var sel = 0
    var body: some View {
        VStack {
            Picker("Test", selection: $sel) {
                Text("A").tag(0)
                Text("B").tag(1)
                Text("C").tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            Picker("Test", selection: $sel) {
                Text("A").tag(0)
                Text("B").tag(1)
                Text("C").tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            .onTapGesture(perform: {
                oneSelected = (self.sel == 1)
            })
            Text("Selected: \(sel)")
        }
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View …

下面是我创建标准分段控件的代码。

struct ContentView: View {

    @State private var favoriteColor = 0
    var colors = ["Red", "Green", "Blue"]

    var body: some View {
        VStack {
            Picker(selection: $favoriteColor, label: Text("What is your favorite color?")) {
                ForEach(0..<colors.count) { index in
                    Text(self.colors[index]).tag(index)
                }
            }.pickerStyle(SegmentedPickerStyle())

            Text("Value: \(colors[favoriteColor])")
        }
    }
}

我的问题是如何修改它以获得自定义的分段控件，我可以在其中将边框与我自己的颜色一起四舍五入，因为使用 UIKit 有点容易？有没有人做过这个。

我最好的例子是优步吃应用程序，当您选择一家餐厅时，您可以通过在自定义分段控件中选择一个选项来滚动到菜单的特定部分。

包括我希望定制的元素：

* 更新 *

最终设计的图像

在更改视图中的一些其他数据后刷新视图时，我正在经历以下分段控件选定段中的文本动画：

这是错误/功能还是有办法消除这种行为？

这是重现效果的代码：

import SwiftUI

struct ContentView: View {
    let colorNames1 = ["Red", "Green", "Blue"]
    @State private var color1 = 0

    let colorNames2 = ["Yellow", "Purple", "Orange"]
    @State private var color2 = 0

    var body: some View {
        VStack {
            VStack {
                Picker(selection: $color1, label: Text("Color")) {
                    ForEach(0..<3, id: \.self) { index in
                        Text(self.colorNames1[index]).tag(index)
                    }
                }.pickerStyle(SegmentedPickerStyle())

                Text("Color 1: \(color1)")
            }
            .padding()

            VStack {
                Picker(selection: $color2, label: Text("Color")) {
                    ForEach(0..<3, id: \.self) { index in
                        Text(self.colorNames2[index]).tag(index)
                    }
                }.pickerStyle(SegmentedPickerStyle())

                Text("Color 2: \(color2)") …

我正在尝试使用CupertinoSegmentedControl来自 flutter Cupertino 库的AppBarusing the bottom 属性来实现以下设计（高度 = 32）

所以我尝试了以下方法：

@override
    Widget build(BuildContext context) {
        return Scaffold(
                appBar: AppBar(
                    elevation: 2,
                    backgroundColor: Colors.white,
                    centerTitle: true,
                    title: Text(this.widget.title, style: TextStyle(color: Colors.black)),
                    bottom: PreferredSize(
        child: Padding(
          padding: const  EdgeInsets.only(top: 8, bottom: 12),
          child: Row(
            children: <Widget>[
              SizedBox(width: 24),
              Expanded(
                child: CupertinoSegmentedControl(
                  children: this.widget.tabs,
                  groupValue: this._selectedTab,
                  onValueChanged: (value) {
                    this.setState(() => this._selectedTab = value);
                    this._tabController.animateTo(value);
                  }
                ),
              ),
              SizedBox(width: 24)
            ],
          ),
        ),
        preferredSize: Size(double.infinity, 48)
      )
                ), …